利用分页来做数据渲染

应用场景

当导入数据太多时，由于数据量太大（上万条），会导致浏览器渲染DOM节点异常的卡

使用一个属性（this.changestudentY）去保存所有数据，this.studentlist作为当前页面需要渲染的那一页数据

	data(){
    	return {
        	// 整体的数据
        	changestudentY:[],
            // 当前页面需要显示的数据
            studentlist：[],
            // 原始页数
            pageY: 1,
            // 每条个数
            pageSizeY: 20,
            // 总条数
            totalY: 0,
        }
    }

分页按钮

    <div class="page">
      <el-pagination
        @size-change="handleSizeChangeY"
        @current-change="handleCurrentChangepageY"
        :current-page="pageY"
        :page-sizes="[20,40, 80,120]"
        :page-size="pageSizeY"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalY"
      ></el-pagination>
    </div>

获取到当前页面需要渲染的数据（例如你需要10条，就是0-9,20,就是0-19。。。）

// 使用一个属性（this.changestudentY）去保存所有数据，this.studentlist作为当前页面需要渲染的那一页数据
    getUserList(pagenum, pagesize) {
      this.studentlist = this.changestudentY.slice(
        (pagenum - 1) * pagesize,
        pagenum * pagesize
      );
    },

最终调用

    // 用户导入分页
    handleSizeChangeY(val) {
      this.pageSizeY = val;
      this.getUserList(this.pageY, this.pageSizeY);
    },
    handleCurrentChangepageY(val) {
      this.pageY = val;
      this.getUserList(this.pageY, this.pageSizeY);
    },