Vue2中如何获取v-data-table当前页用户列表（含排序后）

在Vue 2 + Vuetify的v-data-table组件中，不需要手动计算排序和分页逻辑，组件提供了直接的方式获取当前页面经过排序/过滤后的数据集：

一、使用内置分页排序时的方法 #

当你依赖组件自带的分页、排序功能（前端处理数据），可以通过两种方式获取当前页数据：

1. 直接访问currentItems属性
   给v-data-table添加ref引用，在脚本中通过this.$refs.xxx.currentItems获取当前页排序后的用户列表：

<template>
  <v-data-table
    ref="userTable"
    :items="allUsers"
    :headers="userHeaders"
    :items-per-page="25"
    sort-by="id"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      allUsers: [], // 你的60000+用户数据集
      userHeaders: [
        { text: '用户ID', value: 'id' },
        { text: '用户名', value: 'username' },
        { text: '邮箱', value: 'email' }
      ]
    }
  },
  methods: {
    getCurrentPageData() {
      const currentPageUsers = this.$refs.userTable.currentItems
      // 这里拿到的就是当前页排序后的用户列表
      console.log(currentPageUsers)
    }
  }
}
</script>

2. 监听update:current-items事件
   如果需要在页码切换、排序方式改变时自动触发逻辑，可以监听该事件，事件参数即为当前页的数据集：

<v-data-table
  :items="allUsers"
  :headers="userHeaders"
  :items-per-page="25"
  @update:current-items="onCurrentItemsChange"
></v-data-table>

<script>
export default {
  methods: {
    onCurrentItemsChange(currentItems) {
      // 每次当前页数据变化时触发，currentItems就是目标数据
      console.log('当前页用户:', currentItems)
    }
  }
}
</script>

二、服务器端分页排序的情况 #

考虑到60000+条数据全量加载到前端可能存在性能瓶颈，更推荐使用服务器端分页排序：

• v-data-table会触发pagination事件，事件参数包含当前页码、每页条数、排序字段、排序方向等信息；
• 你需要根据这些参数请求后端接口，后端返回当前页的排序后数据；
• 此时当前页数据就是接口返回的结果，无需组件额外处理。

内容的提问来源于stack exchange，提问作者Luis Angel Urena Lopez