vue.js - Vuejs，vuetify数据表如何在1个搜索框中进行多搜索值？

Question

如何通过 2 列或更多列进行搜索过滤，例如搜索：同一查询中的名字和姓氏不仅是其中一个。

尝试添加自定义过滤器但不起作用。

...

<v-text-field  v-model="search" append-icon="search" label="Search..." single-line hide-details></v-text-field>
<v-data-table :headers="headers" :items="theMainList" :search="search" >
  <template v-slot:items="props">
     <td>{{ props.item.id }}</td>
     <td>{{ props.item.first_name}}</td>
     <td>{{ props.item.last_name}}</td>
     <td>{{ props.item.phone}}</td>
   </template>
   <template v-slot:no-results> 
     <v-alert :value="true" color="error" icon="warning">No Search Result "{{search}}"</v-alert>
   </template>
</v-data-table>
<script>
export default {
  data() {
    return {
      search: '',
      headers: [{
          text: 'id',
          align: 'left',
          value: 'id'
        },
        {
          text: 'First Name',
          align: 'left',
          value: 'first_name'
        },
        {
          text: 'Last Name',
          align: 'left',
          value: 'last_name'
        },
        {
          text: 'Phone Number',
          align: 'left',
          value: 'phone'
        },
      ],
},
</script>

...

谢谢，

标签： vue.jsvuetify.jsdatatables-1.10

Answer 1

Vuetify 中的自定义过滤器目前已损坏：https ://github.com/vuetifyjs/vuetify/issues/12136

Current 的最佳解决方案是theMainList使用计算函数自己过滤项目 ( )。