zoukankan      html  css  js  c++  java
  • vue element-UI纯前端分页

    业务需求:后台获取全部数据,在前端做分页

    核心:hotcourse = res.data.slice((val-1)*this.pageSize,val*this.pageSize) ,将从后台获取的数据取一个区间,赋给循环json数据

       val:当前页码    pageSize:每页条数

    demo:

    <li v-for="item in hotcourse1" >
        ......
    </li>
    <el-pagination
          background 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size='pageSize'
          layout="total, prev, pager, next, jumper"
          :total="total">
    </el-pagination>
    data() {
        return {
        //分页
        currentPage: 1,// 当前页数
        pageSize:4,// 每页条数
        total:total, // 总条目数
        hotcourse:[],
        };
    },
    handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
            console.log(val)
            console.log(`当前页: ${val}`);
            this.hotcourse = res.data.slice((val-1)*this.pageSize,val*this.pageSize)
    },
    从后台获取到数据之后需要
    this.hotcourse = res.data.slice(0,this.pageSize)  不然会造成空白
  • 相关阅读:
    汉语-词语:心性
    CE-计算机系统:并行处理
    CE-操作系统:程序并发执行
    CE-计算机系统:单道批量处理系统
    CE-计算机系统:多道程序
    CE-计算机系统:并行性
    生活灵感汇总
    【剑指Offer】俯视50题之21
    Single Number II
    汉诺塔
  • 原文地址:https://www.cnblogs.com/mzli/p/11102895.html
Copyright © 2011-2022 走看看