Vue.js中如何为v-data-table数据表格添加分页实现代码

v-data-table 默认开启内置分页，分为前端本地分页和服务端分页两种场景，你当前写的options监听逻辑是服务端分页的写法，按下面的配置修正即可正常使用。

1. 前端本地分页（全量数据场景） #

如果你的数据是一次性全部拉取到前端，不需要接口按页返回，不需要额外写分页逻辑代码，只要把全量数据绑定给items属性，组件会自动完成分页、页码切换、每页条数切换的全部逻辑，示例：

<template>
  <v-data-table
    :headers="headers"
    :items="allTableData" <!-- 直接绑定全量数据 -->
    :items-per-page="10" <!-- 默认每页10条，可省略 -->
    :items-per-page-options="[10,20,50]" <!-- 自定义每页条数选项，可省略 -->
  ></v-data-table>
</template>
<script>
export default {
  data() {
    return {
      headers: [],
      allTableData: [] // 接口一次性返回的全量数据
    }
  },
  async mounted() {
    // 拉取全量数据逻辑
    // this.allTableData = await api.getAllData()
  }
}
</script>

2. 服务端分页（接口按页返回数据场景） #

你当前的代码属于这个场景，核心要修正3个问题：watch的deep配置层级错误、缺少options同步逻辑、缺少总数据量绑定。

修正后的完整代码 #

<template>
  <v-data-table
    :headers="headers"
    :items="tableData"
    :page="options.page"
    :items-per-page="options.itemsPerPage"
    :server-items-length="total" <!-- 必传：告诉组件总数据量，自动生成分页器页码 -->
    @update:options="options = $event" <!-- 必传：同步组件的分页/排序状态到本地 -->
    :items-per-page-options="[10, 20, 50, 100]"
  ></v-data-table>
</template>

<script>
export default {
  name: "DataTableSample",
  data() {
    return {
      headers: [/* 你的表头配置 */],
      tableData: [], // 当前页展示的数据
      total: 0, // 接口返回的总数据条数
      options: {
        page: 1, // 初始页码，默认从1开始
        itemsPerPage: 10, // 初始每页条数
        sortBy: [], // 排序字段，不需要排序可省略
        sortDesc: [] // 排序规则，不需要排序可省略
      }
    }
  },
  watch: {
    // 监听分页/排序状态变化，重新拉取对应页数据
    options: {
      handler() {
        this.getData()
      },
      deep: true // 注意：deep必须写在options的监听配置内部，你之前写在watch外层是无效的
    }
  },
  methods: {
    async getData() {
      // 传分页参数调用接口，传参参考：{ page: this.options.page, pageSize: this.options.itemsPerPage }
      const res = await /* 你的接口请求方法 */
      this.tableData = res.data.list
      this.total = res.data.total
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

常见踩坑说明 #

• 不要给v-data-table加hide-default-footer属性，加了会隐藏底部分页器
• 初始页码不要设为0，组件的页码是从1开始计数的，设0会导致分页器显示异常
• 如果需要自定义分页器样式，可以通过footer-props属性配置，不需要自己重新写分页组件
• 如果你手动传了pageCount属性，组件会优先用你传的值算总页数；不传的话会根据server-items-length / itemsPerPage自动计算，普通场景不需要手动传pageCount

内容的提问来源于stack exchange，提问作者arve