码迷,mamicode.com
首页 > 其他好文 > 详细

elementui无限动态加载分页

时间:2020-01-13 19:31:39      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:OLE   webkit   order   loading   length   auto   ffffff   min   ted   

第一步:在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中的官网

技术图片

elementui无限动态加载分页

标签:OLE   webkit   order   loading   length   auto   ffffff   min   ted   

原文地址:https://www.cnblogs.com/caohanren/p/12188695.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!