如何解决如何搜索不在标题中的 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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。