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

问题描述

我的标题：

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，我将如何使用我的搜索输入？

解决方法

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

通过将项目包含在 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 列的 demo。