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

【问题标题】：Get length of filtered items in Vuetify data-table获取 Vuetify 数据表中过滤项目的长度
【发布时间】：2020-09-12 08:42:03
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

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

分页事件传递给yourMethod的分页参数包含以下信息：

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

【讨论】：

谢谢，这确实是最好最干净的方式！

【解决方案2】：

我假设您使用search 属性来过滤掉您的数据。如果是这样，您需要添加对表 ref="myTable" 的引用。然后你可以像这样抓取一系列过滤的项目：this.$refs.myTable.selectableItems。

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

【讨论】：

感谢您的超快速响应！然而问题是selectableItems 只返回页面上当前的项目。我需要获取项目总数（不仅仅是当前页面上的项目），以便计算自定义分页组件的长度。
恐怕解决这个问题的唯一方法是创建一个自定义搜索功能，以便在过滤项目“进入表格”之前知道它们的长度。

【解决方案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 版本。

【讨论】：