vue+elementui 实现分页效果

最新推荐文章于 2024-06-19 10:54:10 发布

南天*

最新推荐文章于 2024-06-19 10:54:10 发布

阅读量165

点赞数 2

文章标签： Vue.js ElementUI 分页数据展示动态加载

本文链接：https://blog.csdn.net/weixin_51490430/article/details/117225521

版权

vue+elementui 实现分页效果

重点：dateLists.slice((currentPage-1)*pagesize,currentPage*pagesize)"

 //表格数据
<el-card  shadow="hover" v-for="(item,index) in dateLists.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index" style="margin:30px 0;"    >
  <div class="box-card" >
  <!-- <div class="box-card" @click="curPage(index)"> -->
    <div class="care_con">
    <p class="care_name">{{item.careName}}</p>
    <p class="care_area">{{item.careArea}}</p>
    <p class="care_see">{{item.careSee[0]}}</p>
    <p class="care_see">{{item.careSee[1]}}</p>
  </div>
  <div class="care_learn">
      <span>了解更多</span>
      <img src="1.png" alt="">
  </div>
  </div>
 
</el-card>
 <!-- 分页 -->
<div class="abil_page">
<el-pagination
   @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[1, 2, 3, 4]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="userlength">
</el-pagination>
</div>

data(){
    currentPage:1, //初始页
    pagesize:1,//一页显示几条数据
    userList: [],
    userlength:1
}
 methods: {
  handleSizeChange(val) {
   this.pagesize = val;
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    this.currentPage = val;
    console.log(`当前页: ${val}`);
  }
},
mounted() {
  this.userList  = this.dateLists;
  this.userlength= this.dateLists.length;
 console.log(this.userList,"this.userList", this.userlength)
}