![](/img/trans.png)
[英]Vuetify Data Table (v-data-table) - how to conditionally style values in certain columns
[英]How to search in v-data-table by values from merged columns?
我有这个 v 数据表:
<v-data-table
v-model="selectedAssets"
:headers="headers"
:items="assetList"
:items-per-page="10"
:search="search"
:custom-filter="filterWithBarcodes"
:dense="isDense"
item-key="id"
multi-sort
show-select>
有 3 个标题:
headers:[
{ text: 'Asset id', align: 'start', sortable: true, value: 'id'},
{ text: 'Name', sortable: true, value: 'name'},
{ text: 'Type', sortable: true, value: 'assetType'},
etc...
],
如何通过合并两列中的值在此表中进行搜索? 我必须通过类似于“assetType-id”的“barcode”进行搜索。 LAP-130。 搜索仅适用于单列,当我键入 LAP 或按 id 时,但当我键入 LAP-130 时,它什么也没找到。
也许带有自定义过滤器属性的东西?
我相信您还可以为每列提供自定义过滤器:
headers: [
{ text: "Asset id", align: "start", sortable: true, value: "id" },
{ text: "Name", sortable: true, value: "name" },
{
text: "Type",
sortable: true,
value: "assetType",
filter: (value , search, item) => {
if (!search) return true;
return `${item.assetType}-${item.id}`.includes(search.toLowerCase())
},
},
],
请注意,即使未提供搜索道具,此功能也将始终运行。 因此,如果不应应用过滤器,您需要确保以 true 值提前退出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.