实现element 下拉选择分页加载

下拉框分页加载

element 的el-select组件没有直接提供下拉分页加载，实际业务当中会有一些数据量比较大的下拉框可以采取分页选择

• 思路，可以通过自定义指令来监听滑动位置来触发加载

指令代码

下面的200这个值是下滑到百分之多少触发请求，可以自定义

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

使用

<template>
  <el-select v-model="value1" multiple placeholder="请选择" v-loading-more="ajaxMet">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
       
      }
    },
    methods:{
		ajaxMet(){
			console.log('触发请求')
		}
	}
  }
</script>