获取 Vuetify 数据表中已筛选项目的长度

Question

有没有办法在Vuetify数据表中获取过滤项目的长度？当行被过滤时，显示的项目的长度明显减少，我需要知道过滤器后有多少个项目，因为我需要更新我的外部分页组件。

Answer 1

假设您使用的是 vuetify 2.2.x，则可以使用 v 数据表的分页事件。<v-data-table&nbsp;@pagination="yourMethod"...调用您的方法methods: {&nbsp; yourMethod(pagination) {&nbsp; &nbsp; console.log(pagination.itemsLength) // length of filtered/searched items in Vuetify data-table&nbsp; },分页事件传递给您的方法的分页参数包含以下信息：{&nbsp; page: number&nbsp; itemsPerPage: number&nbsp; pageStart: number&nbsp; pageStop: number&nbsp; pageCount: number&nbsp; itemsLength: number}

Answer 2

我假设您正在使用属性来过滤掉您的数据。如果是这样，您需要添加对表 的引用。然后，您可以获取过滤项目的数组，如下所示：.searchref="myTable"this.$refs.myTable.selectableItems如果是其他一些过滤方法，则方法是相同的 - 使用refs。

Answer 3

我通过在我的搜索字段和显示的数据上放置一个手表来做到这一点。我还必须添加一个超时，因为否则，它将显示搜索发生之前显示的当前记录量。@Watch('search')@Watch('table.data')onSearchChanged() {&nbsp; setTimeout(() => {&nbsp; &nbsp; const table = (this.$refs.dynamoTable as any);&nbsp; &nbsp; this.filteredItemCount = table?.itemsLength || 0;&nbsp; }, 1200);}我这样做，以便我可以显示搜索提示。get searchHint(): string {&nbsp; const count = this.filteredItemCount;&nbsp; const total = (this.table.data?.length)&nbsp; &nbsp; ? this.table.data.length&nbsp; &nbsp; : 0;&nbsp; return this.$t('search_records', { count, total });}然后，它作为搜索提示在我的搜索文本字段中正确显示。<v-text-field class="ml-2"&nbsp; v-model="search"&nbsp; prepend-inner-icon="filter_list"&nbsp; :disabled="!table.data || !table.data.length"&nbsp; :label="$t('filter')"&nbsp; clearable&nbsp; :hint="searchHint"&nbsp; :persistent-hint="true"/>这是在Vuetify的1.5.24版本上。