如何搜索不在标题中的Vuetify v-data-table列?

Question

My Header:

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" },
],

My Templated Item:

<template v-slot:item.name="{ item }">
{{ item.name }} {{ item.sku }}
</template>

我将能够搜索item.name，但不能搜索item。sku，我将如何使用我的搜索输入的项目。Sku，如果它没有在标题中指出?

Answer 1

不需要custom-filterprop的最简单方法是在headers中包含sku字段，但隐藏该列。

通过将项目包含在headers数组中并使用align属性来实现。将align设置为" d-none"。注意d-none前面的空格，这很重要:

headers: [
{ text: 'SKU', value: 'sku', align: ' d-none' }, // ✅ align ' d-none' hides it
{ 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" },
],

现在SKU列已经存在并且可以搜索，但是没有显示。

下面是一个使用Vuetify默认的<v-data-table>数据和一个额外的SKU列的演示。

Answer 2

将align属性设置为' d-none'可以工作，但是在移动版本的v-data-table上仍然可以看到标题(如果您将浏览器窗口缩小到足够小，您可以自己看到它)。

为了在手机上隐藏它，你也必须使用一些CSS。

下面的CSS为我工作:

.v-data-table
>>> .v-data-table__wrapper
> table
> tbody
> .v-data-table__mobile-table-row
> .v-data-table__mobile-row:nth-of-type(2) {
display: none;
}

当然，在我的例子中，我想隐藏的头是第二个顺序。如果你的是第一个或第三个，你只需把相应的数字放在:n -of-type选择器中。