如何搜索不在 headers 中的 Vuetify v-data-table 列？

Question

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

我的模板项目：

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

我将能够搜索 item.name 但不能搜索 item.sku，如果 headers 中未指明，我将如何使用 item.sku 的搜索输入]?

Answer 1

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

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

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 列存在并且可以搜索，但未显示。

这是一个 demo 使用 Vuetify 默认 <v-data-table> 数据和一个额外的 SKU 列。

Answer 2

将对齐属性设置为“d-none”有效，但 header 在 v-data-table 的移动版本上仍然可见（您可以自己查看如果你把浏览器缩小 window 就够了）。

为了在移动设备上也隐藏它，您还必须使用一些 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;
}

当然，在我的示例中，我想隐藏的 header 排在第二位。如果你的是第一或第三或其他什么，你只需将相应的数字放在 :nth-of-type 选择器中。

如何搜索不在 headers 中的 Vuetify v-data-table 列？

How do I search a Vuetify v-data-table column that is not in headers?

javascript

vue.js

vuejs2

vuetify.js

v-data-table