Javascript 将对象属性用作VueJS数据表中的字段值

在我的项目中，我使用VueJS（2.5.9）为管理应用程序呈现和编辑数据表。对于数据表，我首先使用了一个简单的网格组件，如示例所示，然后我发现了这个很棒的包，但是从VueJS VM的角度来看，操作的主要原则几乎保持不变

因此，在我的虚拟机的

数据

对象中，我有一个

列

数组，例如

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

其中，每个元素表示每个记录对象的一个属性，即表的第i行包含从

用户[i]

作为

用户[i]获取的数据。name

，

用户[i]。names

等。当然，

users

数组也在我的VM的

数据

对象中

在我的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>

---

当然，这是行不通的。我将vue-tables-2的主要JSFIDLE演示分成两部分，这样现在

code

字段就是对象。是否有人知道如何在表中为每条记录显示

code.hash

？

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

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

我在这里更新了小提琴：

---

请参阅有关如何使用模板的文档：

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

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

我在这里更新了小提琴：

---

请参阅有关如何使用模板的文档：

为了清楚起见，一个可能的解决方法是执行类似于

countries.forEach（（usr，idx，arr）=>{arr[idx].code_hash=arr[idx].code.hash；}）的操作当虚拟机被挂载时，这在我的应用程序中起作用，但从许多角度来看，你可能会猜到这有多可怕。也许可以创建一个以扁平对象数组的形式返回数据的计算程序？是的，这是一个有效的替代方案，绝对值得尝试。但是，这样做会丢失对我来说有点重要的原始数据结构。目前，我通过在新字段中展平对象来“模拟”这样的结构，称之为
code\u hash
，代表
code.hash
，但我一直在寻找更优雅（且可维护）的东西。我想说的是，一个可能的但丑陋的解决方法是做一些类似于
国家的事情。forEach（（usr，idx，arr）=>{arr[idx].code_hash=arr[idx].code.hash；}）当虚拟机被挂载时，这在我的应用程序中起作用，但从许多角度来看，你可能会猜到这有多可怕。也许可以创建一个以扁平对象数组的形式返回数据的计算程序？是的，这是一个有效的替代方案，绝对值得尝试。但是，这样做会丢失对我来说有点重要的原始数据结构。目前，我通过在名为
code\u hash
的新字段中展平对象来“模拟”这种结构，它代表
code.hash
，但我一直在寻找更优雅的（和可维护的）东西。谢谢你，这正是我想要的。谢谢你，这正是我想要的。