合并 2 个值并放入 v-data-table 列（Vuetify）答案

【问题标题】：merge 2 values and put in a v-data-table column (Vuetify)合并 2 个值并放入 v-data-table 列（Vuetify）
【发布时间】：2020-06-03 18:49:06
【问题描述】：

是否可以合并到值并放入 v-data-table 中的一列？

List.vue

<template>
  <v-app>
        <v-data-table
          :items="items"
          :headers="headers"
        />
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      items: [
         { first_name: "Peter", last_name: "Johnson" },
         { first_name: "Simon", last_name: "Walker" }
       ],
      headers: [
        { text: "first_name", value: "first_name" },
        { text: "last_name", value: "last_name" },
      ]
    };
  }
};
</script>

例如，我想将 Peter Johnson 放在我的 v-data-table 的 Full name 列中，虽然它没有 Full name 列。

【问题讨论】：

标签： javascript vue.js datatable vuetify.js nuxt.js

【解决方案1】：

您可以使用带有v-data-table 的插槽来呈现虚拟列。但是你需要有一个专栏full_name。

<v-data-table :headers="headers" :items="items">
  <template #item.full_name="{ item }">{{ item.first_name }} {{ item.last_name }}</template>
</v-data-table>

export default {
  data() {
    return {
      items: [
        { first_name: "Peter", last_name: "Johnson" },
        { first_name: "Simon", last_name: "Walker" }
      ],
      headers: [{ text: "Full Name", value: "full_name" }]
    };
  }
};

https://vuetifyjs.com/en/components/data-tables#slots

【讨论】：

如果您在上述情况下遇到 ES lint 错误，您可能想尝试以下格式：<template v-slot:[item.full_name]="{ item.first_name } { item.last_name }">
非常糟糕的方法，伙计们要小心，因为当你这样做时过滤将不再起作用
#item.full_name 不适合我。我用v-slot:item.full_name

【解决方案2】：

只需在后端添加一个“全名”虚拟列，或者使用计算属性。

【讨论】：

【解决方案3】：

关于 Pierre Said 的回答， 'v-slot' 指令不支持任何修饰符。 (eslint-plugin-vue)

<v-data-table :headers="headers" :items="items">
    <template v-slot:[`item.full_name`]="{ item }">{{ item.first_name }} {{ item.last_name }}</template>
</v-data-table>

【讨论】：

可能是first_name 和last_name 列也显示在表中。