el-select下拉选框动态加载数据

如果数据过多，需要用下拉选框展示，如果一起加载很浪费资源，远程搜索也只能搜索已经加载出的数据（这个功能有待优化），后面优化后会在此更新记录。

一、在main.js文件中创建下拉加载方法

Vue.directive('loadMore', {
  bind(el, binding) {
    // 获取element，定义scroll
    let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    select_dom.addEventListener('scroll', function () {
      let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (height) {
        binding.value();
      }
    });
  }
});

我也直接在页面中直接创建，但是获取不到this.scrollHeight、this.scrollTop和this.clientHeight，会报错，不知道原因。

二、在页面中可进行调用

在el-select中添加v-loadMore="loadMore"

<el-select value-key="id" filterable v-loadMore="loadMore" v-model="value" placeholder="请选择">
  <el-option v-for="(item, key) in dataList" :key="key" :label="item.name" :value="item.id" />
</el-select>

在data中定义接口返回的页数

data() {
    return {
        dataList: [],
        allPages: '', // 接口返回页数
    }
}

this.pageNum是当前页面中的页码，在获取下拉列表数据时，给allPages进行赋值。

三、页面中的懒加载方法

// 懒加载方法
loadMore() {
  if (this.pageNum >= this.allPages) return;
  this.pageNum++;
  this.geData(this.pageNum);
},

四、页面获取下拉列表数据，进行数据的回显设置

async geData(current) {
  const objParams = {
    current,
    size: this.pageSize,
  };
  const { data, code } = await getDataInfo(objParams);
  if (code === 200) {
    for (let index in data) {
      this.dataList.push({
        name: data[index].name,
        id: data[index].id,
      });
    }
    this.allPages = data.pages;
  }
}