Vue3语法糖+ElementUI table实现表格分页

Vue3语法糖中使用 ElementUI 实现表格分页的方法与 Vue2 差别不大，主要是在引入 ElementUI 和定义组件的方式上有些不同。

1. 在 setup 中引入 ElementUI 组件：

import { ref } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';

export default {
  setup() {
    const currentPage = ref(1); // 当前页码
    const pageSize = ref(10); // 每页显示条目数
    const total = ref(0); // 总条目数
    const tableData = ref([]); // 表格数据

    const handleCurrentChange = (val) => {
      currentPage.value = val;
      getData();
    }

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

    getData();

    return {
      currentPage,
      pageSize,
      total,
      tableData,
      handleCurrentChange
    }
  },
  components: {
    ElTable,
    ElTableColumn,
    ElPagination
  }
}

2. 在 template 中使用 ElementUI 组件：

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

需要注意的是，Vue3 中使用 ElementUI 组件时需要在组件选项中声明组件，而不是在 template 中通过 import 引入。另外，由于 Vue3 中没有了 this，需要使用 ref 来定义响应式数据。