vuetify v-data-table 使用搜索功能搜索标题中未指示的项目属性答案

【问题标题】：vuetify v-data-table using search function to search for item's property that is not indicated in the headersvuetify v-data-table 使用搜索功能搜索标题中未指示的项目属性
【发布时间】：2021-04-25 17:08:15
【问题描述】：

我的桌子是这样的：

我有一个模板化的“产品名称”，其中代码如下：

                <template v-slot:item.name="{ item }">
                  <v-list-item two-line>
                    <v-list-item-avatar style="width: 70px; height: 70px" tile>
                      <v-img :src="item.img" alt="John" />
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title style="">
                        <a
                          style="
                            text-decoration: none;
                            color: #0b0b0b;
                            font-size: 0.9em;
                          "
                          >{{ item.name }} {{ item.variation }}</a
                        >
                      </v-list-item-title>
                      <v-list-item-subtitle class="mt-1">
                        <small class="mr-5">
                          <v-icon small>mdi-package-variant</v-icon>
                          {{ item.sku }}
                        </small>
                        <small>
                          {{ item.shop_name }}
                        </small>
                      </v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </template>

据我了解，搜索仅从我们指出我的标题的标题中搜索值：

      headers: [
        { text: "Product Name", value: "name" },
        { text: "Quantity", value: "quantity" },
        { text: "Price", value: "price" },
        { text: "Orders", value: "itemsSold" },
        { text: "Revenue", value: "revenue" },
        { text: "Status", value: "active" },
      ],

如何从标头中搜索未声明的值？如MEDIHEAL-MASK-PLACENTAREVITAL-EX（表中第一项产品名称的副标题）

我正在考虑在没有“文本”元素的标题中放置另一个值，并将该值模板化以在表格中不显示任何内容。有什么更清洁的方法吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我想出了这个：

在你的 items 数组中有 searchable 属性：

items: [
  ... 
  { name: "MEDIHEAL Beauty Mask", quantity: 483, price: 0, somePropThatsNotVisible: "String it could be found by"  }
  ...
]

使用自定义过滤器：

<v-data-table :headers="headers" :items="items" :search="search" :custom-filter="filter">

methods: {
  filter (value, search, item) {      
    return Object.values(item).some(prop => {
      return String(prop).includes(search)
    })
  }
},

就是这样！现在所有道具都是可搜索的，但如果不包含在标题中，则不会显示。

【讨论】：

【解决方案2】：

您可以覆盖该列的标题定义上的过滤器属性。

headers: [
  { 
    text: "Product Name", value: "name", filter: product => { 
      // compare product.property against this.search and return true/false
    } 
  },
  // ... your other col definitions
]

【讨论】：