el-select实现多数据触底加载

el-select实现多数据触底加载

1.html

<el-form-item label="名称:" prop="id">
  <el-select
    v-model="Form.id"
    placeholder="请选择"
    v-loadmore="loadMore"
    :remote-method="remoteMethod"
    filterable
    remote
  >
    <el-option
      v-for="(item, index) in List"
      :key="index"
      :label="item.val"
      :value="item.id"
    ></el-option>
  </el-select>
</el-form-item>

2,自定义指令

import Vue from "vue";
Vue.directive("loadmore", {
  bind(el, binding) {
    const SELECTWRAP_DOM = el.querySelector(
      ".el-select-dropdown .el-select-dropdown__wrap"
    );
    SELECTWRAP_DOM.addEventListener("scroll", function () {
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (CONDITION) {
        binding.value();
      }
    });
  },
});

3.事件

const remoteMethod = (el) => {
  state.categoryVague = el;
  getgoodsList();
};
const loadMore = () => {
  state.formData.pageIndex++;
  getUsers(state.formData);
};
const getUsers = (v) => {
  let num = ~~state.formData.pageIndex * ~~state.formData.pageSize;
  state.userItems = state.goods.filter((item, index, arr) => {
    return index < num;
  });
};
//列表
const List = () => {
  let params = {
    need_page: 0,
  };
  API(params).then((res) => {
    if (res.data) {
      state.goods = res.data.data;
      // -- allData
      state.userItems = res.data.data.filter((item, index) => {
        return index <= 9;
      });
    }
  });
};

希望此文章能帮助到你;