Как реализовать мультифильтр по данным в таблице?

Question

[kikosko]

Набор тестовых данных:

const data = [
  {type: "TYPE1", name: "someName1", scope: "scope1", source: "someSource1", additionalType: "ADDITIONAL_TYPE1"},
  {type: "TYPE2", name: "someName2", scope: "scope2", source: "someSource2", additionalType: "ADDITIONAL_TYPE2"},
  {type: "TYPE3", name: "someName3", scope: "scope3", source: "someSource3", additionalType: "ADDITIONAL_TYPE3"},
];

Объект фильтров который создаю динамически:

const filters = {
  type: [ "TYPE1" ], // фильтр по селекту из списка
  name: "someName1",  // фильтр по текстовому полю
  scope: [ "scope1", "scope2", "scope3" ], // фильтр по селекту из списка
  source: "someSource1", // фильтр по текстовому полю
  additionalType: ["ADDITIONAL_TYPE1", "ADDITIONAL_TYPE2", "ADDITIONAL_TYPE3" ]  // фильтр по селекту из списка
}

Как из заданных фильтров получить подходящий элемент из массива data?

[{type: "TYPE1", name: "someName1", scope: "scope1", source: "someSource1", additionalType: "ADDITIONAL_TYPE1"}]

Answer 1

[0xD34F]

Как отфильтровать массив:

const filterArrByObj = (arr, obj) =>
  Object.entries(obj).reduce((arr, [ k, v ]) => {
    return arr.filter(Array.isArray(v)
      ? n => v.includes(n[k])
//           !v.length || v.includes(n[k]), если при пустом массиве допустимо любое значение
      : n => v === n[k]
//           n[k].includes(v), если точное соответствие не нужно
    );
  }, arr);

Отфильтрованные данные оформляете в виде вычисляемого свойства:

computed: {
  filteredData() {
    return filterArrByObj(this.data, this.filters);
  },
},

Значение которого используете при рендеринге таблицы вместо исходных данных:

<tr v-for="n in filteredData">
  ...

Comments

[kikosko]

спасибо!
люблю разбирать Ваши решения и учиться на них :)