объединить 2 значения и поместить в столбец v-data-table (Vuetify)

Question

Можно ли объединить значения и поместить в один столбец в v-data-таблице?

Список. 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-data, хотя в ней нет столбца Full name.

Answer 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

Answer 2

просто добавьте виртуальный столбец «полное имя» в конце или используйте вычисляемое свойство.