elementui无限动态加载分页

Posted 2021-03-16 caohanren

第一步：在mail.js中引入

import infiniteScroll from ‘vue-infinite-scroll‘
Vue.use(infiniteScroll)

 

第二步：安装 

cnpm install vue-infinite-scroll --save

 

第三步：使用

<div class="schoolPlatformGroup"
             v-infinite-scroll="loadMore"
             infinite-scroll-disabled="scrollDisabled"
        >

          <ul style="list-style-type:none"
              v-for="(data,index) in cameraList">
            <el-tag  style="float: left;color: #409eff;z-index: 999;margin-top: 2px;">{{data.id}}</el-tag>
            <li :id="‘platform‘+data.id" class="platformNameTag"
                style="padding: 4px;margin-left: 40px;margin-right: 10px;background: #ffffff;"
                @click="clickPlatform(data.id)">【{{index+1}}】{{data.name}}</li>
          </ul>

          <el-button v-if="loading" style="margin-left: 90px;margin-bottom: 10px" type="warning" plain>数据加载中...</el-button>
          <el-button v-if="noMore" style="margin-left: 80px;margin-bottom: 10px" type="warning" plain>没有更多数据了</el-button>

schoolPlatformGroup样式，要有设置滚动条

.schoolPlatformGroup {
    min-width:220px;
    height: 920px;
    overflow-y: auto;
    margin-top: 10px;
    margin-left: -23px;
  }
  .schoolPlatformGroup::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
  .schoolPlatformGroup::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(52, 163, 242, 0.48);
  }
  .schoolPlatformGroup::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
  }

 

数据变量

 //滚动条分页
      cameraList: [],
      scrollbarPage: 1,
      scrollbarLimit: 30,
      scrollbarTotal: 0,
      loading: false,

 

计算属性

computed: {
    noMore () {
　　　　//this.cameraList.length，此长度是每次请求相机数据叠加的，this.scrollbarTotal是后台返回的数据总数
      return this.cameraList.length > this.scrollbarTotal
    },
    scrollDisabled () {
      //scrollDisabled == false,可以滚动
      return this.loading || this.noMore
    }
  },

接口请求数据

v-infinite-scroll="loadMore"组件中的loadMore方法，每次滚动到末尾就会自动触发此方法

loadMore() {
      this.loading = true
      setTimeout(() => {
        console.log("loadloadloadloadloadloadloadloadloadloadloadloadloadloadloadload")
        this.scrollbarPage += 1
        //请求相机列表
        this.getCameraDataList();
        this.loading = false
      }, 2000)
    },

 

 

//相机列表
    getCameraDataList(){
      this.$http({
        url: this.$http.adornUrl(`/risk/riskcamera/getList`),
        method: ‘get‘,
        params: this.$http.adornParams({
          page: this.scrollbarPage,
          limit: this.scrollbarLimit,
        })
      }).then(({ data }) => {
        console.log("相机列表",data)
        if(data.data != null){
          //总数
          this.scrollbarTotal = data.data.total;
          //列表
          let list = data.data.records
          //this.cameraList = list;
          for(let i=0; i<list.length; i++){
            this.cameraList.push(list[i]);
          }
        }
      })
    },

 

参考elementui中的官网