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

Posted 2023-02-23

【中文标题】Vuetify - 如何使用数据表搜索功能按动态计算的字段值进行过滤？

【英文标题】：Vuetify - How can I use the Data-Table search feature to filter by a dynamically calculated field value?

【发布时间】：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 以便其他人更容易帮助您。我已经为您的问题发布了一个可行的解决方案。如果它解决了您的问题，请将其标记为已接受，以便其他人知道您的问题已解决。

【参考方案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-，它会正确过滤姓名和电话号码。