-1

PrimeVue の 3.3.0 バージョンの新しいフィルター機能を使用して DataTable にフィルターを追加しようとしています。

フィルターがテーブルに追加されたように見えますが、フィルター入力が正しく表示されません。

依存関係が欠落している可能性があると思われます。現在の依存関係は次のとおりです。

"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」クラスを削除して、ページネーションを削除しようとしました...何もありませんでしたこれまでの影響。

では、示されている例の重要な部分を忘れていましたか? 依存関係がありませんか?

4

1 に答える 1

-1

この問題は、main.js にインポートされていない InputText コンポーネントに固有のものでした。

于 2021-02-24T13:34:49.603 に答える