PrimeVue 数据表过滤器

Question

我正在尝试使用 new filter feature from the 3.3.0 version of PrimeVue.

向 DataTable 添加过滤器

过滤器似乎已添加到 table 但 the filter inputs are not properly displayed.

我怀疑我可能缺少依赖项，这是我当前的依赖项：

"dependencies": {
  "primeicons": "^4.1.0",
  "primevue": "^3.3.0",
  "vue": "^3.0.5",
  "vue-router": "^4.0.3"
}

代码示例：

<DataTable :value="anArray" :paginator="true" :rows="5"
    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
    :rowsPerPageOptions="[5, 10, 15, 20]"
    currentPageReportTemplate="Documents {first} à {last} sur {totalRecords}"
    v-model:filters="filters"
    filterDisplay="row">
    <Column field="sujet" header="Sujet">
        <template #filter="{ filterModel, filterCallback }">
            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" />
        </template>
    </Column>
</DataTable>

<script>
import { FilterMatchMode, FilterOperator } from "primevue/api";

export default {
  data() {
    return {
      filters: {
        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
        sujet: { value: null, matchMode: FilterMatchMode.CONTAINS },
      },
    };
  },
};
</script>

我尝试使用过滤器的“菜单”显示，但输入也被缩小为空。

我还尝试删除分页，使用 v-model="filters[[=29=]]['value']"，更改 matchMode，使用占位符，删除 "p-column- filter" class, ...到目前为止没有任何影响。

我是不是忘记了示例中的一个重要部分？我是否缺少依赖项？

Answer 1

没关系，该问题特定于未在 main.js 中导入的 InputText 组件。

PrimeVue 数据表过滤器

PrimeVue DataTable Filter

filter

vue.js

primevue