merge 2 values and put in a v-data-table column (Vuetify)

Question

Is it possible to merge to values and put into one column in 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>

For example I want to put Peter Johnson in Full name column of my v-data-table, While it doesn't have Full name column.

Answer 1

You can render a virtual column with the use of slots with v-data-table . But you need to have a 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

Answer 2

On Pierre Said's answer, 'v-slot' directive doesn't support any modifier. (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>

Answer 3

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