vue+element-ui 实现下拉框滚动加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+element-ui 实现下拉框滚动加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

该功能是由 自定义滚动指令结合下拉框 :remote-method 远程搜索实现的

一、el-select组件绑定属性

 <el-select clearable v-model="form.materialId" v-el-select-loadmore="loadmore" placeholder="请选择序列" filterable remote :multiple="type == 'add' ? true : false" :remote-method="remoteMethod" :loading="selectLoading" style="width:100%">
     <el-option v-for="(item, index) in typeList" :key="index" :label="item.materialName" :value="item.id">
     </el-option>
 </el-select>

开启远程搜索参考官方文档
绑定自定义指令 v-el-select-loadmore=“loadmore”文章来源地址https://www.toymoban.com/news/detail-634383.html

二、自定义滚动指令

 directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
            * scrollHeight 获取元素内容高度
            * scrollTop 获取或者设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，那它的scrollTop值默认为0
            * clientHeight 获取元素的可见高度
            * 如果元素滚动到底，下面的等式返回true,没有则返回false
            * 
          **/
          const condition = (this.scrollHeight - this.scrollTop) <= (this.clientHeight + 10);
          if (condition) {
            binding.value();
          }
        })
      }
    }
  },

三、绑定方法

 data() {
    return {
      typeList: [],
      typeQuery: {
        pageNum: 1,
        pageSize: 10,
        materialName: ""
      },
      typeTotal: 0,
      selectLoading: false,
    };
  },
  methods: {
    // 获取后端数据
    getTypeList() {
      this.selectLoading = true

      const params = new URLSearchParams();
      for (const key in this.typeQuery) {
        params.append(key, this.typeQuery[key]);
      }
      getTypeList(params).then(
        response => {
          this.selectLoading = false
          this.typeList = [...this.typeList, ...response.rows];
          this.typeTotal = response.total
        }
      );
    },
    
    //下拉框搜索方法
    remoteMethod(query) {
      this.typeQuery.materialName = query
      this.typeQuery.pageNum = 1
      this.typeList = []
      this.getTypeList()
    },
    
    //滚动加载
    loadmore() {
      if (this.typeTotal > this.typeList.length) {
        this.typeQuery.pageNum++;
        this.getTypeList();
      }
    },
  

  },