Фильтр таблицы данных PrimeVue

Я пытаюсь добавить фильтры в DataTable, используя новую функцию фильтрации из версии 3.3. 0 версии PrimeVue.

Кажется, что фильтры добавлены в таблицу, но входные данные фильтра не отображаются должным образом.

Я подозреваю, что мне может не хватать зависимости, вот мои текущие:

"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, ... Пока ничего не повлияло .

Так я забыл существенную часть показанного примера? Я пропустил зависимость?


person Aurélien    schedule 24.02.2021    source источник


Ответы (1)


Неважно, проблема была связана с компонентом InputText, который не был импортирован в main.js.

person Aurélien    schedule 24.02.2021