vue借助element实现分页功能

1. 首先第一步就是我们利用element来写一个基本的页面分页功能：

<el-col :span="24" class="toolbar pageBar">
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[20, 30, 40, 50]"
          layout=" prev, pager, next, sizes, total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>

接下来就是我们data里面的数据

export default {
  name: "Peopledetail",
  data() {
    return {
      //当前页数
      currentPage: 1,
      // 总条数
      total: 0,
      //总页数
      page: 1,
      // 页面条数
      pageSize: 20,
    };
  },

 methods: {
    //pageSize改变时
    handleSizeChange() {
      this.getEmployeeList();
    },
    //条目改变时
    handleCurrentChange() {
      this.getEmployeeList();
    },
    }

    getEmployeeList() {
      this.loading = true;
      request({
        url: "/authc/get_limit_maintenance",
        method: "post",
        data: {
          page: this.currentPage,
          counts: this.pageSize,
          queryType: "keyWord",
          keyWord: this.findName,
        },
      }).then((res) => {
        if (res.code === 0) {
          this.loading = false;
          this.total = res.data.result_counts;
          this.page = res.data.result_pages;
          this.tableData = res.data.result_records;
          console.log("lll", this.tableData);
        }
      });
    },

后面是利用后端接口来测试的，后端会返回总的条目数和总的页面数。