Vuestic DataTable 如何显示来自对象属性的值？答案

【问题标题】：How to Vuestic DataTable displays values from properties of objects?Vuestic DataTable 如何显示来自对象属性的值？
【发布时间】：2022-10-15 16:47:56
【问题描述】：

我在我的 vue 项目中使用 Vuestic，我需要显示对象中属性的值，我有这样的东西：

myObject: {
  subObject: {
    name
  }
}

我有一个 myObject 列表，我需要在 DataTable 中显示子对象的名称。我的 DataTable 指向 headers 对象：

headers: [
  { key: 'subObject.name', label: 'Name' }
]

那可能吗？

【问题讨论】：

标签： vue.js vuejs3 vuestic vuestic-admin

【解决方案1】：

如果我错了，请纠正我，但听起来您想从另一个 myObject 对象数组创建一个 myObject.subObject.name 值数组？

您可以使用Array.prototype.map 做到这一点：

myObjectArray.map((obj) => {
  return {
    key: obj.subObject.name,
  };
});

上面的代码将采用这样的数组：

myObjectArray = [
  { subObject: { name: "a" } },
  { subObject: { name: "b" } },
  { subObject: { name: "c" } },
]

并返回：

[
  { key: "a" },
  { key: "b" },
  { key: "c" },
]

您可以将结果分配给计算属性。我不确定您的 label 值来自哪里，但我相信您可以修改上面的代码以包含它

【讨论】：

事实上不是。我会尽力澄清。我在 TS 中有一个带有一些属性（如 id、name）的考试类，在这个类中我也有对象（如具有 id、name 等属性的客户端）。我有一个 Exam 数组，需要在我的列表中显示 Client 对象内的属性。如果 Vuestic DataTable 组件允许，我现在不支持，也许我需要使用您引用的方法来创建一个具有我需要的所有属性的新对象。

【解决方案2】：

是的，这绝对是可能的。

直到 6 月 23 日 this commit 才支持此功能。因此，由于vuestic-ui 的 v1.4.2 于 6 月 24 日发布，您可以在键中使用点表示法来检索数据表的嵌套属性。

这是一个工作示例：link。

【讨论】：