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

whitzsjs  于 2022-11-25  发布在  Vue.js
关注(0)|答案(4)|浏览(224)

有什么方法可以获得Vuetify数据表中过滤项的长度吗?当行被过滤时,显示项的长度明显减少,我需要知道过滤后有多少项,因为我需要更新我的外部分页组件。

1zmg4dgp

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
}
2wnc66cl

2wnc66cl2#

我假设您使用search属性来过滤数据。如果是这样的话,您需要添加对表ref="myTable"的引用。然后您可以获取过滤项的数组,如下所示:this.$refs.myTable.selectableItems .
如果是其他一些过滤方法,方法也是一样的--使用参比。

jyztefdp

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版本。

afdcj2ne

afdcj2ne4#

这工作正常

let itemsFiltered = this.$refs.my_table.$children[0].filteredItems
let lengthFiltered =  itemsFiltered.length

相关问题