Vuejs，vuetify Data table 如何在 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>

...

谢谢，

Answer 1

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

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

Vuejs，vuetify Data table 如何在 1 个搜索框中创建多个搜索值？

Vuejs, vuetify Data table how to make multi search value in 1 search box?

vue.js

vuetify.js

datatables-1.10