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

Posted 2023-02-22

【中文标题】如何搜索不在标题中的 Vuetify v-data-table 列？

【英文标题】：How do I search a Vuetify v-data-table column that is not in headers?

【发布时间】：2021-05-01 23:29:54

【问题描述】：

我的标题：

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，如果标题中未指明 item.sku，我将如何使用我的搜索输入？

【参考方案1】：

甚至不需要 custom-filter 属性的最简单方法是在 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 列存在并且可搜索，但未显示。

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

【讨论】：

这有点像 hack，但它非常优雅，我明白为什么会这样。我将在我的项目中尝试一下:)

【参考方案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;

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