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

< Сильный > < EM> 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 в столбец Full name моей таблицы v-данных, хотя в нем нет Full name столбца.

0
Fred II 19 Фев 2020 в 17:55

2 ответа

Лучший ответ

Вы можете визуализировать виртуальный столбец с использованием слотов с 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

2
Pierre Said 19 Фев 2020 в 15:26

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

0
Lyde Su 20 Фев 2020 в 02:46