0

在我的项目中，我使用 VueJS (2.5.9) 来呈现和编辑管理应用程序的数据表。对于数据表，我首先使用了一个简单的 Grid 组件，按照这里找到的示例，然后我发现了这个很棒的vue-tables-2包，但是从 VueJS VM 的角度来看，主要操作原理几乎保持不变相同的。

所以在data我的虚拟机的对象中，我有一个columns数组，比如

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

其中每个元素代表每个记录对象的一个​​属性，即表的第 i 行包含从users[i]as users[i].name、users[i].surname等获取的数据。当然，该users数组也在我的 VM 的dataObject 中。

在我的 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>标记仅用于将uriashref用于链接。

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

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

这会很好，例如写这样的东西：

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

当然，这不起作用。我将 vue-tables-2 的主要 JSFiddle 演示分叉到这个 JSFiddle中，因此现在这些code字段是对象。有谁知道如何在表格中显示code.hash每条记录？

4

1 回答 1

2

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

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

我在这里更新了小提琴：https ://jsfiddle.net/zz6t4kxu/

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

于 2017-12-12T21:03:11.333 回答