vuejs2 - 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/#/datatable/filter

如何使过滤器和排序与 :lazy 一起工作？

乔比

Answer 1

您需要为每个包含数据的列配置一个规则，例如一个学生表（id，name），并在 :globalFilterFields 中添加关联列的 json 字段属性名称。

<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 过滤列 Id 和 Name，使用定义的规则，只记得使用正确的 mactchMode 过滤数字、日期或字符串，FilterMatchMode.CONTAINS 与字符串一起使用。