vue+element UI实现表格数据分页功能

Vue Element UI提供了el-pagination组件来实现表格数据的分页功能。以下是实现步骤：

1. 在Vue组件中引入el-pagination组件并定义分页属性

<template>
  <div>
    <el-table :data="tableData" border>
      //表格内容
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], //表格数据
      total: 0, //总记录数
      pageSize: 10, //每页记录数
      currentPage: 1 //当前页码
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    getData() {
      //获取数据，并更新this.tableData和this.total
    }
  }
};
</script>

2. 在el-pagination组件中绑定事件和属性

- @size-change：当每页显示条数改变时触发的事件，调用handleSizeChange方法更新pageSize并重新获取数据。
- @current-change：当当前页码改变时触发的事件，调用handleCurrentChange方法更新currentPage并重新获取数据。
- :current-page：当前页码，绑定到currentPage属性。
- :page-sizes：每页显示条数数组，可以自定义，默认为[10, 20, 30, 40]。
- :page-size：每页显示条数，绑定到pageSize属性。
- layout：分页组件布局。其中total表示总记录数，sizes表示每页显示条数选择器，prev表示上一页按钮，pager表示页码按钮，next表示下一页按钮，jumper表示跳转输入框和确定按钮。
- :total：总记录数，绑定到total属性。

3. 在getData方法中获取数据并更新表格数据和总记录数

getData() {
  //计算分页查询的参数
  const start = (this.currentPage - 1) * this.pageSize;
  const limit = this.pageSize;
  //发起分页查询请求
  axios.get('/api/data', {
    params: {
      start,
      limit
    }
  }).then(response => {
    this.tableData = response.data.rows; //更新表格数据
    this.total = response.data.total; //更新总记录数
  });
}

以上就是使用Vue Element UI实现表格数据分页功能的步骤。