ElementUI简单分页

2019独角兽企业重金招聘Python工程师标准>>>

记录一下使用VUE和Element UI 组合的时候遇到的一些问题：

分页问题

分页是常见的操作，但是再Element U i里面就变得比较简单了： 看下面的代码：

分页组件：
        <el-pagination
          background
          @current-change="changePageNum"
          layout="total, prev, pager, next"
          :page-size="size"
          :total="total"
        ></el-pagination>

关键字解释：changePageNum：触发翻页的事件；total：总共的数据行数；size：页面大小；Ok，有了这些就够了，然后定义数据获取方法：

    getData() {
	    //----省略ajax请求，这里给出关键的代码
        _this.tableData = response.data.list;//给表格赋值
        _this.total = response.data.total;//获取数据行数
    },

下面是翻页的事件

    changePageNum(page) {
      this.page = page;
      this.getData();
    },

Data里面的属性：

      page: 1,
      size: 2,
      total: 0,
      tableData: [],

然后就可以了

转载于:https://my.oschina.net/xiaoershaoye/blog/3044200