element-ui使用Pagination 分页

当我们在使用分页时，虽然有源代码，但是使用的时候还是出错，所以简单总结一下怎么使用

 我们直接拿最全的功能来写代码

我们先看各个变量的解释

page-size

每页显示条目个数，支持 .sync 修饰符

total

总条目数

number

current-page

当前页数，支持 .sync 修饰符

简单了解这三个已经足够了

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-size="queryInfo.pagesize"
        :page-sizes="[1, 2, 5, 10]"
        layout="total, sizes, prev, pager, next ,jumper"
        :total="total"
      >
      </el-pagination>

data() {
    return {
      lst: [],
      total: 0,
      //参数
      queryInfo: {
        query: "",
        // 当前页数
        page: 1,
        // 显示一页多少条数据
        pagesize: 2,
      },
    };
  },

fnGetData() {
    //第一次获取数据
      this.$axios
        .get("/ping/", { params: {pagesize:this.queryInfo.pagesize, page: this.queryInfo.page } })
        .then((res) => {
          console.log("所有评论", res);
          if (res.data.code == 200) {
            this.lst = res.data.data;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
//每页的数据条数的需求，重新调用方法获取新的数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryInfo.pagesize = val;
      this.fnGetData();
    },
//识别到页数的变化，自动获取新的数据
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.page = val;
      this.fnGetData();
    },