多行标题

<since 2.0>

您可以自定义Vuetable以通过显示多个表头行

  • tableHeader作用域插槽,或
  • header-rows使用标题组件的道具

默认情况下,Vuetable使用VuetableRowHeader组件渲染表头。它将遍历每个字段以显示所提供的title.

使用tableHeader作用域槽

当您定义名为的作用域插槽时tableHeader,这将完全替换Vuetable自动生成的标头。

Vuetable还将标准化的fields定义传递给tableHeader插槽。您将完全控制表头行的呈现方式,甚至可以编写一个组件来呈现自己的表头。这是你的选择。

<vuetable>
  <template slot="tableHeader" slot-scope="{ fields }">
    <!-- define your own table row -->
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </template>
</vuetable>

警告

但是,请注意,您还将失去与列标题进行交互的能力(例如,单击以进行排序)。

幸运的是,Vuetable使用VuetableRowHeader组件生成了默认表头行,该行还处理用户交互。这意味着您也可以在tableHeader插槽中使用它。






















<template>
  <vuetable ref="vuetable"
    api-url="..."
    :fields="..."
  >
    <template slot="tableHeader">
      <vuetable-row-header></vuetable-row-header>
    </template>
  </vuetable>
</template>

<script>
import Vuetable from 'vuetable-2/src/components/Vuetable.vue'
import VuetableRowHeader from 'vuetable-2/src/components/VuetableRowHeader.vue'

export default {
  components: {
    Vuetable,
    VuetableRowHeader
  },
  //...
}
</script>

在这里查看示例

使用header-rows道具

呈现多行标题的另一种方法是使用header-rows

默认情况下,它是一个包含only值的数组VuetableRowHeader。这意味着它将表头行的呈现委托给VuetableRowHeader组件。

但是由于它是一个数组,因此您可以编写自己的组件并将其添加到header-rows数组中 。Vuetable将使用数组中的组件按指定的顺序一一呈现表头行。

该组件也可以像这样简单。

<template>
  <tr>
    <th colspan="2">Group AAA</th>
    <th colspan="4">Group BBB</th>
  </tr>
</template>

在这里查看示例

与Vuetable通信

如果您需要与父Vuetable通信,则可以创建一个计算属性并返回this.$parent,它就是这样VuetableRowHeader做的。

export default {
  //...
  computed: {
    vuetable() {
      return this.$parent
    }
  }
}

或者,您可以发出一个vuetable:header-event包含两个参数的事件,如下所示:

  • 类型String
    一个用于区分事件起源的命名字符串,例如标题行组件的名称。

  • payload Object
    包含与外部组件必要或相关的任何内容的对象。

Vuetable将从自身中继此事件,以便外部组件可以捕获和使用它。
















<template>
  <vuetable
    //..
    @vuetable:header-event="onHeaderEvent"
  ></vuetable>
</template>

<script>
export default {
  //...
  methods: {
    //...
    onHeaderEvent (type, payload) {
      // if (type === 'my-header-row') {
      //   .. do something ..
      // }
    }
  }
}
</script>