ElementUI简单分页

原创
2019/04/30 02:10
阅读数 874

记录一下使用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: [],

然后就可以了

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部