PrimeVue 数据表过滤器

Question

我正在尝试使用 new filter feature from the 3.3.0 version of PrimeVue 向 DataTable 添加过滤器。

过滤器似乎已添加到表格中，但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['sujet']['value']"，更改 matchMode，使用占位符，删除“p-column-filter”类，.. . 到目前为止没有任何影响。

那么我是否忘记了所示示例的重要部分？我是否缺少依赖项？

Answer 1

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