InfiniteScroll 无限滚动

<el-scrollbar style="height: calc(100vh - 320px)">
  <div  v-infinite-scroll="getList" :infinite-scroll-disabled="noMore">
   <div
     @click="handleRiskClick(item)"
     class="item"
     :class="{active: selectedRisk && item.id === selectedRisk.id}"
     v-for="item in riskPoint.list"
     :key="item.id">
   {{ item.name }}
   </div>
 </div>
</el-scrollbar>

js:

data:

riskPoint: {
  pageNum: 1,
  pageSize: 50,
  name: '', // 风险点搜索
  list: [] // 风险点列表
},

method:

/**
 * 获取列表
 */
getList: _.debounce(function () {
  const data = {
    fuzzy: this.riskPoint.name,
    pageNum: this.riskPoint.pageNum,
    pageSize: this.riskPoint.pageSize
  }
  if (this.riskPoint.pageNum === 1) {
    this.$api.fxGrade.getFxStoreList(data).then(res => {
      this.riskPoint.list = res.list
      this.total = res.total
      if (this.total <= this.riskPoint.pageSize) {
        this.noMore = true
      } else {
        this.riskPoint.pageNum++
      }
    })
  } else {
    if (this.noMore) return
    this.$api.fxGrade.getFxStoreList(data).then(res => {
      if (res.total <= res.list.length * this.riskPoint.pageNum) {
        this.noMore = true
      } else {
        this.riskPoint.list.push(...res.list.map(item => {
          return {
            ...item,
            harmIds: [],
            isIndeterminate: false,
            checked: false
          }
        }))
        // this.targetList = [...this.targetList, ...res.list]
        this.total = res.total
        this.riskPoint.pageNum++
      }
    })
  }
}, 500),