如何在 Vue 中设置自定义 CoreUI 列名？

Question

我有 table 的项目对象数组。例如：

[{ name: 'Sam', age: 24 }]

我想设置自定义字段名称而不是将列命名为年龄，我希望它显示列名称为 Id 而不是年龄。那么，基本上我该如何设置自定义列名？

如果有帮助，这里是他们的文档：https://coreui.io/vue/docs/components/table.html

检查 fields 道具。

Answer 1

使用 <CDataTable> 的 fields 属性，您可以指定用于列名的字段数组。这可以是字符串或对象的数组。使用对象语法时，您可以指定各种属性，例如列的标签。参见 <CDataTable> docs:

key (required)(String) - define column name equal to item key.

label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting

这允许您以不同于键的方式命名列。这是一个示例，其中 table 具有列键“id”和“name”，但标签是“ID”和“Surname”：

<div id="app">
  <cdatatable
    :items="items"
    :fields="fields"
  >
  </cdatatable>
</div>

new Vue({
  el: "#app",
  data() {
    return {
      items: [
        { id: 1, name: 'Mary' },
        { id: 2, name: 'Bob' }
      ],
      fields: [                      // Array of column object data
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Surname' }
      ]
    }
  }
});

如何在 Vue 中设置自定义 CoreUI 列名？

How to set custom CoreUI column names in Vue?

javascript

vue.js

vue-component

vuejs2

core-ui