Блог

Я использую Bootstrap-Vue для отображения информации в таблице. Каждый отображаемый элемент имеет два поля (имя и возраст). К настоящему времени я могу фильтровать по одному полю (имя ИЛИ возраст), но я хочу иметь два входа для фильтрации по обоим из них.

Поэтому, если я наберу «Dav» в имени и «2» в возрасте, я хочу отобразить всех людей с «Dav» в имени и «2» в его / ее возрасте.

Я пытался передать массив ([‘age’, ‘name’]) и объект (name: ‘name’, age:’age’) в :filter, но ничего не работает.

Я разветвил пример и упростил его. Здесь у вас будет два ввода, один для имени, а другой для возраста. Вы можете фильтровать по имени (:filter=»name»), но не по возрасту. Я могу переключить «возраст» на «имя», и это будет работать, но только для «возраста».

Вот код:

 [https://jsfiddle.net/esom2f9p/2/][1]
 

TL; DR: таблица фильтруется по «имени», но должна фильтроваться по «имени» и «возрасту». Я хочу знать, как фильтровать по двум или более полям.

Я использовал вычисляемые поля и фильтр-функцию prop

 <b-table bordered show-empty striped stacked="md" no-provider-filtering 
class="management-list" ref="table"
v-model="filteredItems"
:items="tableItems"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:filter-function="filterTable"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
@filtered="onFiltered">
</b-table>
 

Установите для фильтра значение null, если все переменные имеют значение null. Если хотя бы одно из них не равно null, то установите его в массив. В моем примере я просто использую 2 переменные.

 computed: {
    filter: function() {
        if (this.filterVarOne === null amp;amp; this.filterVarTwo ===  null){
            return null;
        }

        return [this.filterVarOne , this.filterVarTwo];
    }
},
 

Тогда функция фильтра будет вызываться при установке одной из переменных.

 methods: {
    filterTable: function(tableRow, filter){
        if (filter[0] !== null amp;amp; filter[1] !== null){
            //both filters set
            return tableRow.columnOne == filter[0] amp;amp; 
                   tableRow.columnTwo == filter[1];
         }
        else {
            return tableRow.columnOne == filter[0] ||
                tableRow.columnTwo == filter[1];
        }

    }
},
 

Из документации bootstrap vue

Функции фильтра будут переданы два аргумента:

исходный объект данных записи строки элемента. Обработайте этот аргумент как доступный только для чтения. содержимое реквизита фильтра (может быть строкой, регулярным выражением, массивом или объектом)

Вы можете использовать computed свойство для фильтрации данных.

Обратитесь к этому —

https://jsfiddle.net/thbn816x/5/