2

我的标题：

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

4

2 回答 2

4

甚至不需要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 列存在并且可搜索，但未显示。

这是一个使用带有附加 SKU 列的 Vuetify 默认数据的演示。<v-data-table>

于 2021-01-28T07:49:34.540 回答
0

将 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 选择器中。

于 2022-01-09T16:45:11.780 回答