Vuetify - 如何使用数据表搜索功能按动态计算的字段值进行过滤？答案

【问题标题】：Vuetify - How can I use the Data-Table search feature to filter by a dynamically calculated field value?Vuetify - 如何使用数据表搜索功能按动态计算的字段值进行过滤？
【发布时间】：2020-03-16 18:29:43
【问题描述】：

尝试使用 Vuetify 的数据表根据字段的计算值进行搜索/过滤。随意跳入代码笔并为自己输入一些值。例如，我将其设置为可以搜索电子邮件地址字段；但是，员工姓名和电话记录字段不起作用。

Codepen
https://codepen.io/Jasilo/pen/PooLjbE

VUE：

<div id="app">
  <v-app id="inspire">
    <v-card>
      <header>How can I search by the computed Name and Phone fields?</header>
   <v-card-title>
     <header>Employee List</header>
     <v-spacer></v-spacer>
     <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
   </v-card-title>
   <v-data-table v-bind:headers="headers" v-bind:items="employeesArray" v-bind:search="search">

     <template v-slot:item.email="{ item }">
       <div> 
         {{ item["email"] }} </div>
     </template>
     <template v-slot:item.name="{ item }">
       <div> 
         {{ getName(item) }}
       </div>
     </template>
     <template v-slot:item.phone="{ item }">
       <div> {{ getPhone(item) }}</div>
     </template>

     <template v-slot:no-data>
       <div icon="warning">
         {{ gridEmpty }}
       </div>
     </template>
   </v-data-table>
  </v-card>
  </v-app>
</div>

HTML：

<div id="app">
  <v-app id="inspire">
    <v-card>
      <header>How can I search by the computed Name and Phone fields?</header>
   <v-card-title>
     <header>Employee List</header>
     <v-spacer></v-spacer>
     <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
   </v-card-title>
   <v-data-table v-bind:headers="headers" v-bind:items="employeesArray" v-bind:search="search">
     <template v-slot:item.email="{ item }">
       <div> 
         {{ item["email"] }} </div>
     </template>
     <template v-slot:item.name="{ item }">
       <div> 
         {{ getName(item) }}
       </div>
     </template>
     <template v-slot:item.phone="{ item }">
       <div> {{ getPhone(item) }}</div>
     </template>

     <template v-slot:no-data>
       <div icon="warning">
         {{ gridEmpty }}
       </div>
     </template>
   </v-data-table>
  </v-card>
  </v-app>
</div>

【问题讨论】：

我认为你必须使用自定义过滤器
欢迎来到 SO！感谢您发布一个好的 Q 并提供 Codepen 以便其他人更容易帮助您。我已经为您的问题发布了一个可行的解决方案。如果它解决了您的问题，请将其标记为已接受，以便其他人知道您的问题已解决。

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

最简单的方法是使用计算属性：

  computed: {
    employeeTableData() {
      return this.employeesArray.map(e => {
        return {
          email: e.email,
          name: this.getName(e),
          phone: this.getPhone(e),
        };
      });
    },
  },

然后将v-data-table改为employeeTableData，直接引用属性。

Working codepen

然后您可以搜索XD 或666-，它会正确过滤姓名和电话号码。

【讨论】：