element-ui无限滚动组件InfiniteScroll的使用

InfiniteScroll

虽然是普通的element组件，但是用到了就记录一下，防止忘了

1.基础用法

直接百度，无需多言

一般用来做滑动分页

<div class="time-scroll" v-infinite-scroll="load" :infinite-scroll-disabled="isScroll">
    <el-timeline>
        <el-timeline-item 
          :timestamp="i.time"
          placement="top"
          v-for="(i, index) in arrData"
          :key="index"
        >
        <div>
            <div @click="getIndex(index, i)">
                <span>{{ i.code }}</span>
            </div>
        </div>
        </el-timeline-item>
    </el-timeline>
</div>

load () {
    this.page.pagenum += 1;
    const parmas = {
            pagesize: this.page.pagepagesize,
            pagenum: this.page.pagenum,
            id: this.id,
    };
    getList(parmas).then(d => {
            this.data = [...this.data,...d.data.records]
            if (d.data.records.length < this.page.pagepagesize) {
                    this.isScroll = true;
                    return false;
            }
    });
};

2.业务需求

在获得后端传出的数据之后，根据某个字段过滤其中某些不需要的数据，展示其中需要展示的数据

load () {
    this.page.pagenum += 1;
    const parmas = {
            pagesize: this.page.pagepagesize,
            pagenum: this.page.pagenum,
            id: this.id,
    };
    getList(parmas).then(d => {
            // 假设需要过滤的条件为i.flag == 0
            const temp = d.data.records.filter(i=>i.flag == 0)
            if(temp && temp.length){
                    this.data = [...this.data,...temp]
            } else {
                   if (
                    this.page.pagenum >=
                    Math.ceil(d.data.total / this.page.pagesize) + 1
                  ) {
                    this.isScroll = true;
                    return;
                  }
                  this.load();
            }
            if (d.data.records.length < this.page.pagepagesize) {
                    this.isScroll = true;
                    return false;
            }
    });
};