实现el-transfer下拉加载

最新推荐文章于 2024-04-18 16:55:59 发布

LingSnow1019

最新推荐文章于 2024-04-18 16:55:59 发布

阅读量442

点赞数 6

文章标签： javascript vue elementui

本文链接：https://blog.csdn.net/LingSnow1019/article/details/136339149

版权

//页面代码
 <el-transfer
      ref="transfer"
      v-model="userIds"
      :data="userList"
      :props="{
          key: 'id',
          label: 'realName',
       }"
       filterable
      :titles="['请选择', '已选择']"
 ></el-transfer>
 //更改样式，固定高度
.el-transfer-panel {
    width: 220px;
  }
.el-transfer-panel__body {
    height: 388px;
  }
.el-transfer-panel__list {
    height: 290px;
  }
.el-transfer__buttons {
    padding: 0;
  }
  //data里声明isLoading:false做限制用
  //通过ref获取到el-transfer滚动的元素并监听
 mounted() {
    let scrollBox = this.$refs.transfer.$el.getElementsByClassName(
      "el-transfer-panel__body"
    )[0];
    scrollBox.addEventListener(
      "scroll",
      (res) => {
        this.lazyLoading(res);
      },
      true
    );
  },
 methods: {
    lazyLoading(res) {
      //滚动时判断是否触碰到底部
      let bottomOfWindow =
        res.target.scrollTop + res.target.clientHeight >=
        res.target.scrollHeight;
      if (bottomOfWindow && this.isLoading == false) {
        this.isLoading = true;
        this.page += 1;
        this.getAllUser(this.page);
      }
    },
    getAllUser(page) {
    //这是个列表接口
      userListApi({ current: page ,size:10}).then((res) => {
        if (res.status == 200 && res.data.records.length > 0) {
        //一页小于十条时证明后面已无数据，可以停止下拉加载
          if (res.data.records.length < 10) {
            this.isLoading = true;
          }else{
            this.isLoading = false;
          }
        }
      });
    },
  }