Сделаем описания столбцов, по которым допускается фильтрация, и способов фильтрации - имя, русифицированный вариант имени (чтобы показывать его в select'ах), и, у столбцов, тип данных:
data: () => ({
filterColumns: [
[ 'name', 'имя', 'string' ],
[ 'count', 'количество', 'number' ],
[ 'distance', 'расстояние', 'number' ],
],
operations: [
[ 'equal', 'равно' ],
[ 'contains', 'содержит' ],
[ 'greater', 'больше' ],
[ 'less', 'меньше' ],
],
...
Тип данных указываем потому, что значения различных типов сравниваются по-разному. Кстати, определим, как именно:
data: () => ({
types: {
string: {
equal: (a, b) => a.toLowerCase() === b,
contains: (a, b) => a.toLowerCase().includes(b),
greater: (a, b) => a.toLowerCase() > b,
less: (a, b) => a.toLowerCase() < b,
},
number: {
equal: (a, b) => a === +b,
contains: (a, b) => `${a}`.includes(b),
greater: (a, b) => a > +b,
less: (a, b) => a < +b,
},
},
...
На основе описаний столбцов и способов фильтрации создадим select'ы:
<select v-model="column">
<option v-for="n in filterColumns" :value="n[0]">{{ n[1] }}</option>
</select>
<select v-model="operation">
<option v-for="n in operations" :value="n[0]">{{ n[1] }}</option>
</select>
Наконец, собственно фильтрация - конечно же оформляем в виде вычисляемого свойства. По имени столбца, по которому надо фильтровать, извлекаем его описание и, соответственно, тип его данных. На основе типа данных и способа фильтрации извлекаем функцию фильтрации. Если таковая существует, и значение по которому надо фильтровать непустое, то выполняем фильтрацию, в противном случае возвращаем полные данные:
computed: {
filteredItems() {
const { items, column } = this;
const type = this.filterColumns.find(n => n[0] === column)?.[2];
const filterFn = this.types[type]?.[this.operation];
const filterVal = this.filterVal.toLowerCase();
return filterFn && filterVal
? items.filter(n => filterFn(n[column], filterVal))
: items;
},
...
https://jsfiddle.net/8df3z1un/1/