Vue+ElementUI table实现表格分页

要实现表格分页，可以使用 ElementUI 提供的 el-pagination 组件，同时结合 el-table 组件使用。

1. 在 template 中添加 el-pagination 组件和 el-table 组件：

<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange">
    </el-pagination>

    <el-table :data="tableData" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

2. 在 data 中定义表格数据、分页相关数据以及每页显示的条目数：

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条目数
      total: 0 // 总条目数
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      // 根据当前页码获取对应的数据
      this.getData();
    },
    getData() {
      // 根据当前页码和每页显示条目数获取对应的数据
      // 更新表格数据和总条目数
    }
  }
}
</script>

3. 在 mounted 中调用 getData 方法获取初始数据：

<script>
export default {
  mounted() {
    this.getData();
  },
  methods: {
    // ...
  }
}
</script>

4. 在 getData 方法中根据当前页码和每页显示条目数获取对应的数据，更新表格数据和总条目数：

<script>
export default {
  methods: {
    async getData() {
      const res = await axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      });
      this.tableData = res.data.list;
      this.total = res.data.total;
    }
  }
}
</script>

这样就可以实现基本的表格分页功能了。