如何按合並列中的值在 v-data-table 中搜索？

Question

我有這個 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 時，它什么也沒找到。

也許帶有自定義過濾器屬性的東西？

Answer 1

我相信您還可以為每列提供自定義過濾器：

      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 值提前退出。