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

Question

我的标题：

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

我的模板项目：

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

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

Answer 1

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

\n

通过将该项包含在headers数组中并使用align属性来做到这一点。将其设置align为" d-none". 注意 前面的空格d-none，这很重要：

\n

headers: [\n  { text: \'SKU\', value: \'sku\', align: \' d-none\' }, // \xe2\x9c\x85 align \' d-none\' hides it\n  { text: "Product Name", value: "name" },\n  { text: "Quantity", value: "quantity" },\n  { text: "Price", value: "price" },\n  { text: "Orders", value: "itemsSold" },\n  { text: "Revenue", value: "revenue" },\n  { text: "Status", value: "active" },\n],\n

\n

现在，SKU 列已存在且可搜索，但未显示。

\n

以下是使用 Vuetify 默认数据和附加 SKU 列的演示。<v-data-table>

\n