vue+element ui 列表数据分页显示

最新推荐文章于 2023-12-21 22:31:07 发布

故之

最新推荐文章于 2023-12-21 22:31:07 发布

阅读量1.3k

点赞数

分类专栏： vue.js+element ui 学习文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Orz3261/article/details/107212353

版权

本文介绍如何结合Vue.js和Element UI库，实现列表数据的分页显示功能。通过索引值传递给组件，动态改变页面内容，优化用户查看大量信息的体验。

摘要由CSDN通过智能技术生成

<template>
      <div class="main-middle">
        <div class="main-site" v-if="currentSiteData">

          <group-component :style="currentPage.styles" :item="currentPage"></group-component>
         //显示多少个页索引是由：total和：page-size共同决定的，:current-page.sync是当前页索引值，，触发onCurrentChange方法时，传的也是这个值。
         <div class="pagination-con">
              <el-pagination
              :page-size="1"
              layout="prev, pager, next"
              :total="pageLength"
              :current-page.sync="currentStart"
              @current-change="onCurrentChange">
          </el-pagination>                    
        </div>      
        
      </div>
     
    </div>
    
  </div>
</template>

<scrip