有什么方法可以获得Vuetify数据表中过滤项的长度吗?当行被过滤时,显示项的长度明显减少,我需要知道过滤后有多少项,因为我需要更新我的外部分页组件。
1zmg4dgp1#
假设您使用的是vuetify 2.2.x,则可以使用v-data-table的分页事件。
<v-data-table @pagination="yourMethod" ...
调用方法
methods: { yourMethod(pagination) { console.log(pagination.itemsLength) // length of filtered/searched items in Vuetify data-table },
pagination事件传递给yourMethod的pagination参数包含以下信息:
{ page: number itemsPerPage: number pageStart: number pageStop: number pageCount: number itemsLength: number }
2wnc66cl2#
我假设您使用search属性来过滤数据。如果是这样的话,您需要添加对表ref="myTable"的引用。然后您可以获取过滤项的数组,如下所示:this.$refs.myTable.selectableItems .如果是其他一些过滤方法,方法也是一样的--使用参比。
search
ref="myTable"
this.$refs.myTable.selectableItems
jyztefdp3#
我通过在搜索字段和正在显示的数据上放置一个手表来做到这一点。我还必须添加一个超时,因为否则,它将在搜索发生之前显示当前显示的记录数量。
@Watch('search') @Watch('table.data') onSearchChanged() { setTimeout(() => { const table = (this.$refs.dynamoTable as any); this.filteredItemCount = table?.itemsLength || 0; }, 1200); }
我这样做是为了显示搜索提示。
get searchHint(): string { const count = this.filteredItemCount; const total = (this.table.data?.length) ? this.table.data.length : 0; return this.$t('search_records', { count, total }); }
然后,它会正确地显示在我的搜索文本字段中,作为搜索提示。
<v-text-field class="ml-2" v-model="search" prepend-inner-icon="filter_list" :disabled="!table.data || !table.data.length" :label="$t('filter')" clearable :hint="searchHint" :persistent-hint="true" />
这是Vuetify的1.5.24版本。
afdcj2ne4#
这工作正常
let itemsFiltered = this.$refs.my_table.$children[0].filteredItems let lengthFiltered = itemsFiltered.length
4条答案
按热度按时间1zmg4dgp1#
假设您使用的是vuetify 2.2.x,则可以使用v-data-table的分页事件。
调用方法
pagination事件传递给yourMethod的pagination参数包含以下信息:
2wnc66cl2#
我假设您使用
search
属性来过滤数据。如果是这样的话,您需要添加对表ref="myTable"
的引用。然后您可以获取过滤项的数组,如下所示:this.$refs.myTable.selectableItems
.如果是其他一些过滤方法,方法也是一样的--使用参比。
jyztefdp3#
我通过在搜索字段和正在显示的数据上放置一个手表来做到这一点。我还必须添加一个超时,因为否则,它将在搜索发生之前显示当前显示的记录数量。
我这样做是为了显示搜索提示。
然后,它会正确地显示在我的搜索文本字段中,作为搜索提示。
这是Vuetify的1.5.24版本。
afdcj2ne4#
这工作正常