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)  不然会造成空白

转载于:https://www.cnblogs.com/mzli/p/11102895.html