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

【问题标题】：Use Object property as field value in VueJS data tables在 VueJS 数据表中使用 Object 属性作为字段值
【发布时间】：2017-12-12 18:47:04
【问题描述】：

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

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

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

其中每个元素代表每个记录对象的一个属性，即表的第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？

【问题讨论】：

为了清楚起见，一个可能的虽然丑陋的解决方法是在安装 VM 时执行countries.forEach((usr, idx, arr) => { arr[idx].code_hash = arr[idx].code.hash; }); 之类的操作，这在我的应用程序中有效，但您可能会从很多方面猜到这是多么可怕查看。
也许创建一个以扁平对象数组形式返回数据的计算对象？
是的，这是一个有效的替代方案，绝对值得一试。然而，这样做你有点失去了对我来说有点重要的原始数据结构。我目前通过在称为code_hash（代表code.hash）的新字段中展平对象来“模拟”这种结构，但我正在寻找更优雅（且可维护）的东西。

标签： javascript html vue.js vuejs2 vue-data-tables

【解决方案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

【讨论】：

非常感谢，这正是我想要的。