Vuetify：通过多个值搜索 v-data-table？答案

【问题标题】：Vuetify: Searching a v-data-table by multiple values?Vuetify：通过多个值搜索 v-data-table？
【发布时间】：2020-11-03 17:57:43
【问题描述】：

<v-card-title>
    <v-text-field
        v-model="search"
        label="Search Product Name"
        single-line
        hide-details
    ></v-text-field>
</v-card-title>
<v-data-table
    :headers="headers"
    :items="this.$store.getters['options/getAllAvailableProducts']"
    :items-per-page="10"
    :search="search"
    class="elevation-1"
>
</v-data-table>


///

data() {
    return {
        dialog: this.$store.getters['liveDashboard/getShowDynamicSelectionModal'],
        search: '',
        headers: [
            { text: 'Image',
              value: 'thumb',
              sortable: false,
            },
            {
              text: 'Product',
              sortable: true,
              value: 'product_name',
            },
            {
              text: 'Price',
              sortable: false,
              value: 'inventory_min',
            },
            {
              text: 'Inventory',
              sortable: true,
              value: 'inventory_quantity',
            },
            {
              text: '',
              sortable: true,
              value: 'inventory_id',
            },
        ],
    }
},

我有一个由products 填充的数据表。单个product 有多个字段：

示例：

this.$store.getters['options/getAllAvailableProducts'] 的值是一个产品数组。

   [
     {
       'product_name': "test test",
       'sku': "145534",
       'brand': "Nike",
       'inventory_id': 4,
       'inventory_min': 44,
       'inventory_quantity': 2,
     },
     {
       'product_name': "new product",
       'sku': "5534545",
       'brand': "Nike test",
       'inventory_id': 5,
       'inventory_min': 512,
       'inventory_quantity': 44, 
     }
   ]

现在，输入产品名称会显示与名称匹配的产品，但我希望输入名称、sku 或品牌会显示所有匹配的产品。

因此，输入“test”会调出这两个产品，因为第一个产品在 name 字段中有“test”，而第二个产品在 brand 名称中有“test”。

【问题讨论】：

@Zim 哇，我不敢相信我忘记了那部分。刚刚添加
刚刚为数据添加了正确的结构

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

Vuetify 的数据表只能在 headers 属性中定义的字段上搜索。

但是，您可以使用custom-filter...

让它搜索所有字段

<v-card>
  <v-card-title>
    <v-text-field
      v-model="search"
      label="Search"
      single-line
      hide-details
    ></v-text-field>
  </v-card-title>
  <v-data-table
      :headers="headers"
      :items="items"
      :search="search"
      :custom-filter="customSearch"
   >
   </v-data-table>
</v-card>


methods: {
      customSearch (value, search, item) {
          return Object.values(item).some(v=>v&&v.toString().toLowerCase().includes(search))
      }
}

Demo

我回复了similar question here。

【讨论】：