Vue结合Element ui实现分页

页面结构（分页组件-element UI官网）

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
</el-pagination>

行为交互（动态获取每页显示条数，总数据，当前页数）

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      total: 0, //总数据条数
      pageSize: 5 //每页显示条数
    };
  },
  methods: {
    getUserList() {
      userlist(this.currentPage, this.pageSize).then(res => {
        // console.log(res);
        /**
           * "id": 38,
            "ctime": "2020-05-18T22:48:16.000Z",
            "account": "aaa",
            "userGroup": "超级管理员",
            "imgUrl": "default.jpg"           * 
           */

        //先转换时间 再赋值
        let arr = res.data.data;
        for (let iterator of arr) {
          iterator.ctime = getChinaTime(iterator.ctime);
        }
        //本页数据
        this.tableData = arr;
        //  总商品条数
        this.total = res.data.total;
      });
    },
    // 点击切换条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getUserList()
    },
    // 点击页数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      //
      this.currentPage = val;
      this.getUserList();
    }
  },
  created() {
    this.getUserList();
  }
};

效果图示