element之分页器

element的分页器,相对于替换代码

html

            
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 4, 8, 9]"
                :page-size="2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNum"
              >
              el-pagination>

js

    return {
      totalNum: 0, //总条数
      currentPage:1, //当前是第几页
      pageNum:2,//一页多少条数据
    }
  methods: {
    // 每页显示多少条,触发
    handleSizeChange(val) {
      // 每页显示多少条
      this.pageNum = val
      this.__init(this.pageNum,this.currentPage)
    },

    // 第几页,触发
    handleCurrentChange(val) {
      // 第几页
      this.currentPage = val
      this.__init(this.pageNum,this.currentPage)
    },

    // 初始化数据 1 : 一页显示多少条 , 2 : 第几页
    __init(pageSize, pageNum) {
      request
        .$axios({
          url: "/querstion/list",
          data: {
            pageSize:pageSize, //一页显示多少条
            pageNum: pageNum,  //第几页         
          },
        })
        .then((res) => {
          this.tableData = res.data.questionnaireList;
          this.totalNum = res.data.total; //总条数
          console.log(res);
        });
    },
}