获取 Vuetify 数据表中过滤项目的长度

Question

Is there any way to get the length of filtered items in the Vuetify data-table? When the rows are filtered the length of shown items obviously decreases and I need to know how many items there after the filter, because I need to update my external pagination component.

Answer 1

Assuming you are using vuetify 2.2.x you can use the pagination event of v-data-table.

<v-data-table
 @pagination="yourMethod"
...

to call your method

methods: {
  yourMethod(pagination) {
    console.log(pagination.itemsLength) // length of filtered/searched items in Vuetify data-table
  },

the pagination parameter passed by the pagination event to yourMethod contains the following informations:

{
  page: number
  itemsPerPage: number
  pageStart: number
  pageStop: number
  pageCount: number
  itemsLength: number
}

Answer 2

I assume you're using search property in order to filter out your data. If so you need to add reference to your table ref="myTable" . Then you can grab array of filtered items like this: this.$refs.myTable.selectableItems .

If it's some other filter method approach is the same - using refs.

Answer 3

I did it by putting a watch on my search field and the data that is being shown. I also had to add a timeout, because otherwise, it will display the current amount of records showing before the search takes place.

@Watch('search')
@Watch('table.data')
onSearchChanged() {
  setTimeout(() => {
    const table = (this.$refs.dynamoTable as any);
    this.filteredItemCount = table?.itemsLength || 0;
  }, 1200);
}

I did this, so that I could show search hint.

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 });
}

It then shows up correctly on my search text field as a search hint.

<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"
/>

This is on version 1.5.24 of Vuetify.