Блог

У меня есть эта таблица v-data:

 <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». КРУГ-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, если фильтр не должен применяться.