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

Question

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

Answer 1

假设您使用的是 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

}

Answer 2

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

如果是其他一些过滤方法，则方法是相同的 - 使用refs。

Answer 3

我通过在我的搜索字段和显示的数据上放置一个手表来做到这一点。我还必须添加一个超时，因为否则，它将显示搜索发生之前显示的当前记录量。

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