Таблица данных PrimeVue

Question

Если я добавлю:lazy="true" к как показано ниже:

<DataTable :value="cars" :lazy="true" :filters="filters" :paginator="true" :rows="10"
    :totalRecords="totalRecords" sortMode="multiple" :loading="loading" @page="onPage($event)">

фильтр столбца и сортировка не работают

Пример кода: https://www.primefaces.org/primevue/

Как сделать так, чтобы фильтр и сортировка работали с: lazy as true?

Jobby

Answer 1

Вам необходимо настроить одно правило для каждого столбца с данными, например, для таблицы студентов (id, name), и добавить имя свойства поля json для связанного столбца в:globalFilterFields.

      <Datatable :filters="filters" :globalFilterFields="[ 'id', 'name' ]">
  <Column field="id" header="ID"/>
  <Column field="name" header="Name"/>
</Datatable>

...

const filters = ref({
  global: { value: null, matchMode: FilterMatchMode.CONTAINS},
  id: { value: null, matchMode: FilterMatchMode.EQUALS},
  name: { value: null, matchMode: FilterMatchMode.CONTAINS},
});

Таким образом, вы указываете DataTable фильтровать идентификатор и имя столбца, используя определенные правила, просто не забудьте использовать правильный mactchMode для фильтрации чисел, дат или строк, FilterMatchMode.CONTAINS используется со строками.

Answer 2

Когда я пробовал отложенную загрузку (на стороне сервера) и глобальную фильтрацию, я понял, что генератор событий :filters не работает.

Побродив по их машинописному файлу, я наткнулся на команду, как во фрагменте

          /**
     * Event to emit after filtering, not triggered in lazy mode.
     * @param {DataTableFilterEvent} event - Custom filter event.
     */
    filter(event: DataTableFilterEvent): void;

Поэтому я думаю, что если вы попытаетесь прослушать событие изменения глобальных фильтров, у вас нет шансов, хотя вы можете использовать v-модель для двусторонней привязки строки поиска.

Пример в их документе выглядит так, как будто работает фильтр отдельных столбцов.