Vue element plus el-scrollbar和无限加载配合使用

<div class="wrapper" style="height: 500px;">
          <el-scrollbar style="height:100%" ref="video_container">
            <ul class="infinite-list" v-infinite-scroll="getVideoList"  infinite-scroll-delay="500">
              <li class="infinite-list-item" style="font-weight: bold;" v-for="i in 10">
                <div class="id item">编号</div>
                <div class="title item" >视频标题</div>
                <div class="upload_time item">上传时间</div>
                <div class="video_format item">视频格式</div>
                <div class="time item">视频时长</div>
                <div class="distribution item">是否分发</div>
                <div class="operation item">操作</div>
              </li>
            </ul>
          </el-scrollbar>
        </div>

Attributes

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	是否禁用	boolean	-	false
infinite-scroll-delay	节流时延，单位为ms	number	-	200
infinite-scroll-distance	触发加载的距离阈值，单位为px	number	-	0
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器。	boolean	-	true

DEMO

<template>
  <div class="container">
    <div
      class="left"
      v-infinite-scroll="onLoad"
      infinite-scroll-disabled="disabled"
      infinite-scroll-immediate="false"
    >
      <div v-for="item in demoList" :key="item.commentId">
        <list-item
          :item="item"
        ></list-item>
      </div>
      <p v-if="listParams.loading">Loading...</p>
      <p v-if="listParams.finished">No More</p>
    </div>
  </div>
</template>
 
<script>
import ListItem from "../../components/ListItem";
export default {
  data() {
    return {
      demoList: [],
      listParams: {
        pageNum: 1,
        pageSize: 10,
        loading: false,
        error: false,
        finished: false,
      },
    };
  },
  components: {
    ListItem,
  },
  created() {
    this.getDemoList();
  },
  mounted() {},
  computed: {
    disabled() {
      console.log(
        this.listParams.loading || this.listParams.finished
      );
      return this.listParams.loading || this.listParams.finished;
    },
  },
  methods: {
    onLoad() {
      this.listParams.loading = true;
      if (this.listParams.finished == false) {
        this.listParams.pageNum++;
        this.getDemoList();
      }
    },
    getDemoList() {
      var that = this;
      var params = {
        pageNum: that.listParams.pageNum,
        pageSize: that.listParams.pageSize,
      };
      this.$api.myHistoryController
        .getDemoList(params)
        .then((res) => {
          if (res.status == 1000) {
            if (res.body.list.length > 0) {
              that.demoList = that.demoList.concat(res.body.list);
              that.listParams.loading = false;
              if (res.body.list.length < that.listParams.pageSize) {
                that.listParams.finished = true;
              }
            } else {
              that.listParams.loading = false;
              that.listParams.finished = true;
            }
          }
          that.listParams.loading = false;
        })
        .catch(function () {
          that.listParams.error = true;
          that.listParams.loading = false;
        });
    },
  },
};
</script>
 
<style scoped>
#header {
  display: none;
}
.container {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 10px;
}
.left {
  width: 400px;
  flex-shrink: 0;
  background-color: white;
  overflow: auto;
}
</style>