字段定义

字段定义是字段定义对象的数组,描述了您希望Vuetable生成HTML表中的数据的哪个字段。它还具有各种选项,可让您完全控制字段数据的显示方式。

字段定义可以定义为简单的字符串数组,(字段定义)对象数组或混合数组。

  • 定义为简单数组的字段

    let fields = ['name', 'email', 'birthdate', 'gender']
    
  • 定义为对象数组的字段

    let fields = [
      {
        name: 'name',
        sortField: 'name'
      },
      {
        name: 'email',
        title: 'Email Address'
      },
      {
        name: 'birthdate',
        sortField: 'birthdate',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
      },
      {
        name: 'gender',
        sortField: 'gender',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        formatter (value) {
          return value === 'M' ? 'Male' : 'Female'
        }
      },
    ]
    
  • 定义为混合数组的字段

    let fields = [
      'name',
      'email',
      {
        name: 'birthdate',
        sortField: 'birthdate',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
      },
      {
        name: 'gender',
        sortField: 'gender',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        formatter (value) {
          return value === 'M' ? 'Male' : 'Female'
        }
      },
      //...
    ]
    

    在初始化期间,Vuetable会将每个字段转换为包含许多带有默认值的选项的字段定义对象。

    警告

    当您将字段定义为简单字符串时,该字符串将在name 选项中使用,指示您要使用的数据结构中的字段名称。您将无法指定其他选项,例如排序,格式化程序等。

    let fields = ['name']
    // will be converted to this
    // let fields = [ { name: 'name' } ]
    

    您可以从字符串数组开始快速入门,然后在以后逐步添加其他选项。

字段选项

name

  • 类型:String | ComponentDefinition

  • 用法:

    要显示的数据字段名称或Vue组件定义。

    该名称也可以是全局注册的字段组件的名称,字段组件定义或在<vuetable>标签内定义的插槽名称。

    如果名称的类型为String,则Vuetable按以下顺序检查:

    • 如果名称以__(双下划线)或vuetable-fields- (fieldPrefix)开头,则它是字段组件。
    • 如果在<vuetable>标签内定义了该名称的作用域槽,则为字段槽
    • 否则,默认为数据中的列名
  • 也可以看看:

sortField

  • 类型:String

  • 用法:

    通常,它与name选项相同。但是,如果在服务器端查询数据时使用不同的字段名称,则可以指定不同的值,例如名字。

    如果指定,该字段将标记为sortable。Vuetable将在字段标题后显示适当的可单击图标。Vuetable还将向服务器发出新请求,并sort=<sortField>附加查询字符串。

title

  • 类型:String | Function

  • 用法:

    如果您想自己指定标题,可以将其放在此处。否则,vuetable将尝试从 name选项中猜测出来。

    您甚至可以将图标类放在标题中,请参见下面的示例

    //.. example using Semantic UI icon class
    {
      name: 'birthdate',
      title: '<i class="orange birthday icon"></i> Birthdate'
    }
    //
    

    如果它是一个函数,则Vuetable将调用它并将返回的值用作列标题。这对于i18n返回本地化文本版本很有用。

titleClass

  • 类型:String

  • 用法:

    您要申请此字段标题的CSS类。

dataClass

  • 类型:String

  • 用法:

    您要申请此字段数据的css类。

formatter

  • 类型:Function

  • 用法:

    Vuetable将调用格式化程序函数以格式化要显示的列的值。

    注意

    这几乎与callback以前的Vuetable-2版本中的选项相同。它被重命名为formatter更好地表明其目的。

    格式化程序功能将从Vuetable中接收以下参数,并且它必须返回Vuetable将用于在该列中显示的值。

    • value — 领域价值
    • vuetable — 对Vuetable本身的引用
      这使得可以将字段定义分离到单独的文件,同时仍允许它在需要时可以访问Vuetable功能。

    这是定义格式器功能的字段的示例。
















    // define as a function reference.
    // in this case, function `gender` must be defined in the `methods` section.
    {
      name: 'gender',
      formatter: gender
    }
    // or, a reference to a function defined in other place
    {
      name: 'gender',
      formatter: Util.formatGender
    }
    
    // define as inline function
    {
      name: 'gender',
      formatter: (value) => (value === 'M') ? 'Male' : 'Female'
    }
    

    在这种情况下,如果value在的gender领域被传递给格式化函数M,它将返回Male。Vuetable将Male为此字段而不是显示M.

visible

  • 类型:Boolean

  • 用法:

    渲染表时此字段是可见还是隐藏。

width

  • 类型:String

  • 用法:

    列的宽度,例如’200px’,’10%’,’2rem’。

    给定的值将应用于表头和数据上的指定字段。

    提示

    使用Vuetable的固定标题功能时,应始终为每个字段设置宽度,因为这会使列表看起来更加一致。

$_index

  • 类型:Number

  • 用法:

    $_index Vuetable自动插入该选项,以指示字段在“字段定义”数组中的位置。当使用Vuetable的功能隐藏/显示特定字段时,这很有用,因为它需要字段的索引位置。

引用嵌套的JSON数据

如果JSON数据结构包含嵌套对象,例如:

























[
  {
    "id": 1,
    "name": "xxxxxxxxx",
    "email": "xxx@xxx.xxx",
    "group_id": 1,
    "address" {
      "street_address":"123 abc place",
      "city":"townsville",
      "province":"Harbor",
      "country":"Antegria"
    }
  }
    .
    .
    .
  {
    "id": 50,
    "name": "xxxxxxxxx",
    "email": "xxx@xxx.xxx",
    "group_id": 3,
    "address" {
      "street_address":"456 xyz street",
      "city":"cityville",
      "province":"Portia",
      "country":"Norland"
    }
  }
]

在这种情况下,可以用以下格式指定嵌套对象的列名:

let columns = ['name', 'email', 'address.city', 'address.country']

将其他数据附加到字段定义对象

您可以使用字段定义对象存储特定于每个字段的任何键值数据。Vuetable仅使用上述选项。其余的将被复制到tableFields(字段定义对象的内部数组)中。

提示

当Vuetable将field对象传递到Field Component或Field Slot时,这些其他键值数据也将可用于任何用途。