el-select 数据下拉懒加载

el-select 数据下拉懒加载

1. 下拉框需要分页查询，需要加入自定义指令，下拉到底部时触发下一页的查询

<el-select v-model="value"
    placeholder="请选择"
    v-loadMore="loadMore">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

2. 自定义指令

loadMore: {
    bind(el, binding) {
      const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');  // 获取下拉框元素
      dom.addEventListener('scroll', function () {    // 监听元素触底
        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
        if (condition) {
          binding.value();
        }
      });
    },
  },

3. 方法

loadMore() {
   console.log('到底部了，继续加载数据')
   // 当下拉框滚动且触底时，会触发此事件，可以在此处去请求下拉框分页数据
 }