VUE + Element UI el-pagination实现前端分页

概述：日常项目中，后端不好处理的接口数据分页，由前端实现数据分页

思路：在vue中前端采取v-for循环时传入index，循环的数据流的长度 = 分页组件的total（总条数）， 用index和el-pagination组件上绑定的当前页面page，三目判断实现。

• 代码如下：

代码语言：javascript复制

   <template>
           <el-scrollbar style="height:695px">
          <div class="ul">
            <div v-for="(prj,index) in listData" v-show="page *10 >= index 1 && (page -1) *10 < index 1 " :key="prj" class="li" >
              <div class="overflow">
                {{ prj.xmmc }}
              </div>
              <div>项目类型：{{ prj.xmlx }}</div>
            </div>
          </div>
        </el-scrollbar>
        <div class="block">
          <el-pagination
            :current-page="page"  // 绑定当前页
            :total="listData.length"  // 绑定总条数
            layout="prev, pager, next"
            smll
            @current-change="changePage"  // 切换页面
            />
        </div>
  </template>
  <script>
  export default {
      data() {
          return {
              page: 1, // 给个默认第一页
              listData: [], // 数据流
          }
      },
      methods: {
          // 渲染数据函数
          getData() 
                this.listData = []
                 requestAll(urls[0], urls[1]).then(res => { 
                      res.features.forEach(prj => {
                        this.listData.push()
                        this.page = 1
                    }) 
      
                })
          },
           changePage(page) {
               this.page = page
           },
      }
  }
  </script>      
  

缺点： 此方法适用于数据量较少的时候，数据量较大时请采用 pl-table 虚拟列表 控制DOM渲染数量。

前端 高性能渲染十万条数据(虚拟列表)参考地址 ：

https://blog.csdn.net/qq_37818095/article/details/102954854

elementui

1 人点赞