特殊字段

特殊字段是普通字段的扩展。它不是数据结构的一部分,而是定义为以特殊方式处理数据的插槽或组件。

以下是Vuetable中的两种特殊字段。

  • 栏位
  • 现场组件

栏位

Field Slot使在Vuetable中自定义字段渲染变得非常容易。

您可以通过在Vuetable标记(作为子元素)中定义一个命名scoped slot来使用Field Slot ,然后name在字段定义对象的选项中使用该插槽名称。Vuetable会自动查找该名称的作用域插槽,并将其用作列。

这是一个例子










<vuetable ref="vuetable"
  api-url="..."
  :fields="fields"
>
  <div slot="gender-slot" slot-scope="props">
    <span v-if="props.rowData.gender === 'M'" class="ui teal label"><i class="large man icon"></i>Male</span>
    <span v-else class="ui pink label"><i class="large woman icon"></i>Female</span>
  </div>
</vuetable>
new Vue({
  data: {
    fields:     [
      //...
      {
        name: "gender-slot",
        title: '<i class="grey heterosexual icon"></i>Gender',
        titleClass: "center aligned",
        dataClass: "center aligned",
        width: "15%",
      },
    ]
    //...
  }
})

字段组件

现场组件是Vuetable独有的,它是使其可扩展和可共享的关键部分。

它负责呈现表头<th>和表数据<td>列。

该组件将由组件调用VuetableRowHeader以呈现每个字段的表头(通过传递:is-header="true"),或者由Vuetable自身调用以呈现该字段的表列数据。

警告

表列数据呈现可能会在不久的将来成为另一个组件,但是希望不会影响Field Component的结构。

这是单个文件组件(SFC)的结构,可帮助您开始为Vuetable创建字段组件。

<template>
  <th v-if="isHeader"
    //...
  ></th>
  <td v-else
    //...
  ></td>
</template>

<script>
import VuetableFieldMixin from 'vuetable-2/src/components/VuetableFieldMixin'

export default {
  mixins: [VuetableFieldMixin],
  //...
}
</script>

有关更多详细信息,请参见创建字段组件部分。

使用哪个?

自然,一开始您可能不需要字段插槽或字段组件。但是,如果您觉得这formatter还不够或能力有限,那么下一步可能是Field Slot。而且,当您发现自己总是不得不经常重复使用“场槽”时,可能是时候使用“场组件”了。

总而言之,

  • formatter首先在字段定义对象中使用函数。
  • 然后,如果需要更多自定义,请使用“字段槽”。
  • 然后,如果您需要多次或在一个以上的地方执行相同的操作,请使用字段组件。

也可以看看:

为什么字段槽不能渲染表头?

Vuetable遍历字段定义以使用 v-for指令呈现每一列,并且要求使用该key属性。但是,该key属性不能在插槽上使用;否则,Vue将抛出此错误。

`key` does not work on <slot> because slots are abstract outlets and can possibly expand into multiple elements. Use the key on a wrapping element instead.