创建字段组件

实施细节

这是字段组件的基本结构。

<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>
  • 使用提供的VuetableFieldMixin

    导入VuetableFieldMixinmixin并在本mixins节中对其进行定义。这个mixin将为您声明所有必要的道具。这些道具将通过Vuetable传递给您的组件。

  • 使用<th>标签呈现表标题,并使用<td>标签呈现表数据。

    is-header prop与v-if和一起使用,v-else以区分表头和表数据模板。由于仅渲染一个标签,因此仍将其视为单根。

    提示

    Vuetable使用VuetableRowHeader组件来呈现所有表头。如果字段定义对象是组件,它将使用激活该组件:is-header="true".

  • 使用vuetable:header-eventvuetable:field-event事件

    • 要在处理表头部分的代码中发出事件,请使用vuetable:header-event.
    • 要在处理表数据部分的代码中发出事件,请使用vuetable:field-event.

    Vuetable具有v-on 捕获 vuetable:header-eventvuetable:field-event事件的指令。Vuetable并将VuetableRowHeader 事件转发给Vuetable。

这是宣告中的道具 VuetableFieldMixin

  • is-header

    • 类型:Boolean
    • 默认:false

    指示字段组件应呈现“标题”还是“数据”模板部分。

  • title

    • 类型:String
    • 默认:""

    字段定义对象的title选项通过title prop 传递。title 如果除了显示列标题外没有其他特殊需要,您可以简单地使用prop来呈现列标题。

  • row-data

    • 类型:Object
    • 默认:null
  • row-index

    • 类型:Number
  • row-field

    • 类型:Object

    该字段的字段定义对象。

    提示

    请记住,您可以使用字段定义对象来保存其他数据,参数或结果。

  • vuetable

    • 类型:Object
    • 默认:null

    如果您需要访问父Vuetable,请使用vuetable

    参见示例

本地使用字段组件

通常,您不需要注册字段组件。只需import将其分配给name 字段定义对象的选项即可。

import MyActionComponent from './components/MyActionComponent.vue'

export default [
  {
    name: MyActionComponent,
    title: 'Action`
  },
  //...  
]

全局注册字段组件

您还可以通过全局注册您的字段组件,Vue.component(..)并通过其名称在字段定义对象中对其进行引用。

// main.js
import Vue from 'vue'
import MyActionComponent from './components/MyActionComponent.vue'

Vue.component('vuetable-field-action', MyActionComponent)
// FieldsDef.js
export default [
  'code',
  'description',
  { 
    name: 'vuetable-field-action'
  }
]

如果使用前缀来命名字段组件vuetable-field-,您甚至可以像这样在字段定义对象中缩短其名称。

// FieldsDef.js
export default [
  'code',
  'description',
  `__action`
]

提示

Vuetable将自动扩展 __以全名开头的全名,该全名vuetable-field-以其字段规范化开始。

也可以看看

共享您的字段组件

这应该足够容易,因为字段组件是单个文件组件(SFC)格式的常规Vue组件。您应该能够创建一个NPM软件包并将其发布到npmjs.com.