Question

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

Answer 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
}

Answer 2

我假设您正在使用search属性来过滤数据。如果是这样，则需要添加对表ref="myTable"的引用。然后，您可以抓取经过过滤的项目数组，例如：this.$refs.myTable.selectableItems。

如果其他过滤方法也一样-使用引用。

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

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

3 个答案: