TA貢獻1806條經驗 獲得超5個贊
假設您使用的是 vuetify 2.2.x，則可以使用 v 數據表的分頁事件。
<v-data-table
@pagination="yourMethod"
...
調用您的方法
methods: {
yourMethod(pagination) {
console.log(pagination.itemsLength) // length of filtered/searched items in Vuetify data-table
},
分頁事件傳遞給您的方法的分頁參數包含以下信息：
{
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
}
TA貢獻1816條經驗 獲得超4個贊
我假設您正在使用屬性來過濾掉您的數據。如果是這樣，您需要添加對表 的引用。然后，您可以獲取過濾項目的數組，如下所示：.searchref="myTable"this.$refs.myTable.selectableItems
如果是其他一些過濾方法，則方法是相同的 - 使用refs。
TA貢獻1829條經驗 獲得超4個贊
我通過在我的搜索字段和顯示的數據上放置一個手表來做到這一點。我還必須添加一個超時，因為否則，它將顯示搜索發生之前顯示的當前記錄量。
@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版本上。
舉報