vue+element 分页二

vue+element实现表格分页（二）

之前有写过一篇可自己操作的表格分页，今天这篇是记录根据后台返回的数据来实现分页，下面是案例：
HTML：

      <el-pagination
        @size-change="handleSizeChange"   
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout=" prev, pager, next,sizes"
        :total="total"
      >
      </el-pagination>

JS：

export default {
  name: "messagepush",
  data() {
    return {
      tableData: [],
      pageNo: 1, //初始页
      pageSize: 10, //    每页的数据
      total: 0,
    };
  }
},
mounted() {
   this.getMessageList();
},
methods: {
    getMessageList() {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      axios
        .request({
          url: url,
          method: "POST",
          data: data,
        })
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res;
            this.total = res.totalRows;
            }
          }
        });
    },
    // 初始页pageNo、初始每页数据数pageSize和数据data
    handleSizeChange: function (pageSize) {
      this.pageSize = pageSize;  //一页几条数据
      this.getMessageList();
    },
    handleCurrentChange: function (pageNo) {
      this.pageNo = pageNo;  //第几页
      this.getMessageList();
    },
}

下面是效果图：