element分页功能

今天用了这个element的分页功能，有坑，所以记录一下。官方给的用法是针对表格的，对表格之外的分页并不友好，先说表格的，主要点就在于数据绑定，得在el-table标签里加上

 :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"

今天主要来说说不是表格形式的分页。
1.直接复制官方给的标签

 <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="number.length"
          ></el-pagination>

2.在data了加上 标签里绑定的数据

 pageNo: 1, //当前页
 pageSize: 15 //每页显示条目数

3.写上标签里绑定的两个change的方法

//分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getlist();
    },
    //当前页数改变
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getlist();
    }

4.最重要的一步，也是和表格分页的区别，这里直接用computed来监控数据。然后在标签的v-for直接循环userdata就可以了。

computed: {
    userdata() {
      let start = (this.pageNo - 1) * this.pageSize;
      let end = this.pageNo * this.pageSize;
      return this.number.slice(start, end);
    }