vue 使用element滚动加载数据（v-infinite-scroll）

美丽先生

已于 2023-05-19 15:06:01 修改

阅读量651

点赞数

文章标签： vue.js javascript elementui

于 2023-05-19 11:54:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43780814/article/details/130763629

版权

在这里插入图片描述
参考element
页面

el-scrollbar(style="height: calc(100% - 35px);" class="infinite-list-wrapper")
  .infiniteBox(class="list" v-infinite-scroll="load1" :infinite-scroll-disabled="disabled")
    .tableContent(v-for="item,index of warnList1" :key="index" class="list-item")
      .indexCell {{ index + 1 }}
      .timeCell {{ item.event_begin_time }}
      .localtionCell {{ item.monitoring_lane }}
      .descriptionCell {{ item.event_desc }}
      .reasonCell {{ item.event_reason }}
  .infiniteText(v-if="loading") 加载中...
  .infiniteText(v-if="noMore") 没有更多了

数据

  data() {
    return {
      warnList1: [[
       {
         id: 35147001, 
         event_begin_time: "2023-04-24", 
         monitoring_lane: "寿昌江二桥西侧车道", 
         event_reason: "是多少1", 
         event_desc: "处理过程1", 
         event_status: 2, 
         serial_number: 1, 
         status_name: "已完成"
       }
      ]],
      disabled: false,
      loading: false,
      noMore: false,
      pageForm: { //页码
        page: 0,
        pageSize: 20
      },
    }
  },

方法

  methods: {
    load1 () {
      this.loading = true
      this.disabled = true
      this.pageForm.page++
      this.getWarnListData1()
    },
    async getWarnListData1 () { // 事件跟进
      let params = { is_add: 1,...this.pageForm1 }
      let res = await this.$api.bridge_Bridge_warnList(params)
      let arr = res.result || []
      if(arr && arr.length < 10) {
        this.disabled = true
        this.noMore = true
      }else {
        this.disabled = false
        this.noMore = false
      }
      this.warnList1 = [...this.warnList1,...arr]
      this.loading = false
    },
  },