Vue+element（分页）

最新推荐文章于 2023-07-02 20:42:52 发布

张张524

最新推荐文章于 2023-07-02 20:42:52 发布

阅读量527

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sinat_42501006/article/details/86527748

本文详细介绍了如何在Vue项目中使用Element UI的分页组件，实现数据的分页展示。通过具体的代码示例，展示了数据的加载、分页切换及每页显示数量的调整过程。

html

 <div class="block" >
    <p class="demonstration" v-for="item in nb">{{item}}</p>
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage4"
       :page-sizes="[2, 5, 10, 20]"
       :page-size="size"
       layout="total, sizes, prev, pager, next, jumper"
       :total="tp.length">
     </el-pagination>
 </div>

data 定义变量

nb:[],
mb:[],
tp:[],
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 1,
size:10,

methods

handleSizeChange(val){
        // console.log(`每页 ${val} 条`);
        this.size = val
        this.mb=[...this.tp]
        this.nb = this.mb.splice(0,this.size)
      },
handleCurrentChange(val) {
	  // console.log(`当前页: ${val}`);
	  // console.log((this.size*val)-this.size)
	  // console.log(this.size*val)
	  this.mb=[...this.tp]
	  // // console.log(this.mb)
	  this.nb = this.mb.splice((this.size*val)-this.size,this.size)
	  this.mb=[...this.tp]
	},

渲染页面

.then(res=> {
        if (res.statusText === 'OK') {
          this.datas = res.data;
          // console.log(this.datas);
          this.foldInfos=this.datas.foldInfo
          this.tp=this.foldInfos
          this.mb=[...this.tp]
          this.nb = this.mb.splice(0,this.size)
          this.mb = [ ...this.nb ]
        }
      })