在 VueJS 数据表中使用 Object 属性作为字段值

Question

在我的项目中，我使用 VueJS (2.5.9) 为管理应用程序呈现和编辑数据 tables。对于数据 table，我首先使用了一个简单的 Grid 组件，按照示例 found here, then I found this great vue-tables-2 包，但是从 VueJS VM 的角度来看，主要的操作原理几乎保持不变。

所以在我的 VM 的 data 对象中，我有一个 columns 数组，例如

columns: [
    'id',
    'name',
    'surname',
    'department',
    'register',
    'uri'
]

其中每个元素表示每个记录对象的属性，即 table 的第 i 行包含从 users[i] 中获取的数据，如 users[i].name，users[i].surname，等等。当然，users 数组也在我的 VM 的 data 对象中。

在我的 HTML 我有类似

的东西

<v-client-table :columns="columns" :data="users" :options="options" v-if="ready">
    <a slot="uri" slot-scope="props" :href="props.row.uri">
        <i class="fa fa-fw fa-pencil-square-o"></i>
    </a>
</v-client-table>

其中 <a> 标签仅用于将 uri 用作 href 到 link。

原则上一切正常，但我的数据恰好是结构化的，因此每条记录的 department 字段又是一个对象。

所以我的问题是：有没有人设法使用子对象的属性来呈现数据 table？

那就太好了，例如写这样的东西：

columns: [
    'id',
     // ...
    'department.name',
    // ...
]

这当然行不通。我将 vue-tables-2 的主要 JSFiddle 演示分叉到 this JSFiddle 中，因此现在 code 字段是对象。有谁知道如何在table中为每条记录显示code.hash？

Answer 1

您可以使用模板函数来呈现代码单元格。

new Vue({
  el: "#app",
  data: {
    columns: ['name', 'code', 'uri'],
    data: getData(),
    options: {
      ...
      templates: {
          code: function (h, row, index) {
              return row.code.hash;
          }
      },
      ...
    }
  }
});

我在这里更新了 fiddle：https://jsfiddle.net/zz6t4kxu/

请参阅有关如何使用模板的文档：https://github.com/matfish2/vue-tables-2#templates

在 VueJS 数据表中使用 Object 属性作为字段值

Use Object property as field value in VueJS data tables

html

javascript

vue.js

vuejs2

vue-data-tables

在 VueJS 数据表中使用 Object 属性 作为字段值

Use Object property as field value in VueJS data tables

html

javascript

vue.js

vuejs2

vue-data-tables

在 VueJS 数据表中使用 Object 属性作为字段值