Element plus+Vue：实现分页功能

最新推荐文章于 2024-09-01 16:54:55 发布

一杯清酒.

最新推荐文章于 2024-09-01 16:54:55 发布

阅读量1k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_45827004/article/details/125044618

版权

1.引入该组件，此处加外层div的作用是为了让分页区域处于最右侧

.el-pagination {
  margin-top: 25px;
  float: right;
}

 <div class="page">
         <el-pagination
          v-model:currentPage="queryInfo.pageNo"//页码
          v-model:page-size="queryInfo.pageCount"//一页的数据量
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"//数据总数
          :page-sizes="[10, 20, 100]"
          layout="total, sizes, prev, pager, next, jumper"/>  
      </div>

2.js中对数据进行处理

data(){
  return {
    //获取所有数据的参数
    queryInfo:{
    "pageCount": 10,
    // 每页的数据总量
    "pageNo": 1
    // 页数，第几页
  },
    ContactList:[],
    total:0//数据总量
  }
},
mounted(){
    this.getContactList()
},
methods:{ 
    getContactList(){
      getContact(this.queryInfo).then(res=>{
        this.ContactList = res.data.data
        this.total = res.data.totalPages*(this.queryInfo.pageCount)
        
    })
  },
  // 监听每页数据变化
  handleSizeChange(newSize){
     this.queryInfo.pageCount = newSize
     this.getContactList()//刷新列表
  },
  // 监听页码值变化
  handleCurrentChange(newNum){
    this.queryInfo.pageNo = newNum
    this.getContactList()//刷新列表
  }
}
}