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

Posted 2023-02-22

【中文标题】合并 2 个值并放入 v-data-table 列（Vuetify）

【英文标题】：merge 2 values and put in a v-data-table column (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 列。

【参考方案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 列也显示在表中。