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

Question

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

列表.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在Full name我的V-数据表的列，尽管它没有Full name列。

Answer 1

您可以使用带有v-data-table. 但是你需要有一个 column 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