Question

在我的项目中，我使用VueJS（2.5.9）来渲染和编辑管理应用程序的数据表。对于数据表，我首先使用一个简单的Grid组件，根据示例found here，然后我找到了这个很棒的vue-tables-2包，但从VueJS VM的角度来看，操作的主要原则是几乎保持不变。

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

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

其中每个元素表示每个记录Object的属性，即表的第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链接。

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

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

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

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

当然，这不起作用。我将vue-tables-2的主要JSFiddle演示分为this JSFiddle，现在code字段是对象。有谁知道如何在表格中显示每条记录的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;
          }
      },
      ...
    }
  }
});

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

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

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

1 个答案: