详细行

明细行是表中每个数据行下方隐藏的附加行。当您只想显示每一行的相关数据,又想在需要时显示其他信息时,明细行将为您提供很大的帮助。

为了使用明细行,您将需要创建一个组件并使用Vue.component助手在全局进行注册。

import Vue from 'vue'
import MyDetailRow from './MyDetailRow.vue'

Vue.component('my-detail-row', MyDetailRow)
<template>
  <vuetable ref="vuetable"
    //..
    detail-row-component="my-detail-row"
  ></vuetable>
</template>

或者,您可以import将其分配给data部分中的变量。

<template>
  <vuetable ref="vuetable"
    //..
    :detail-row-component="detailRow"
  ></vuetable>
</template>
<script>
import MyDetailRow from './MyDetailRow.vue'

export default {
  //..
  data() {
    //..
    detailRow: MyDetailRow,
  },
  //...
}
</script>

然后,您可以使用detail-row-component 属性指定明细行组件的名称。

您的明细行组件应定义以下两个属性:

  • row-data — 当前行数据将传递给
  • row-index — 当前行索引将传递给
  • options — 额外的对象,以防您需要将其他选项传递给明细行组件

//..
props: {
  rowData: {
    type: Object,
    required: true
  },
  rowIndex: {
    type: Number
  },
  options: {
    type: Object,
  }
}

详细行转换

您可以使用detail-row-transition为详细信息组件指定过渡类。

详情行的CSS类

默认情况下,明细行vuetable-detail-row的类属性中。但是您可以detail-row-class用来更改它。

您也可以将功能分配给detail-row-class。该函数将接收row-datarow-index作为参数。它必须返回代表CSS类的字符串。Vuetable会将其应用于<tr>明细行组件。

Vuetable如何跟踪每一个细节行的状态

每个明细行可以独立显示或隐藏。因此,Vuetable需要一种方法来跟踪每个详细信息行的状态以相应地更新UI。

为此,要求每个数据行必须是唯一可识别的。如果您的数据包含一id列(可以唯一地标识每一行),则您无需执行其他任何操作。因为,默认情况下,Vuetable将id用作默认值。

但是,如果数据使用(或具有)可以唯一标识每一行的不同列名,则可以在track-by属性中指定该名称。

例如,您的数据使用uuid 而不是 id列,您可以告诉Vuetable使用它。

<vuetable ref="vuetable"
  //...
  detail-row-component="my-detail-row"
  track-by="uuid"
></vuetable>

您可以使用多种方法来操纵明细行。它们每个都需要一个行标识符作为唯一参数。

要调用这些方法,您可以ref像这样使用标签,

this.$refs.vuetable.toggleDetailRow(rowId)