element-ui的分页如何实现

element-ui的分页如何实现

表格需要绑定的属性
  <el-table :data="data.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">

分页器样式
 <el-pagination
      :total="data.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

js代码执行

需要定义数据的部分
 data() {
    return {
      data: [],//渲染数据的数组信息
      pageSize: 5,//每页的信息条数
      currentPage: 1,//当前页面
    };
  },

函数执行部分

 handleSizeChange: function (pageSize) {
      this.pageSize = pageSize;
      // console.log(this.pagesize); // 每页下拉显示数据
    },

    // 换页：更新列表数据
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage); //点击第几页
    },

然后这样就可以了是不是很简单