vue——el-select实现懒加载带搜索功能

---

主题思路

1.自定义v-el-select-lazyloading指令
2.页面el-select中使用v-el-select-lazyloading和filterValue
3.使用细节

---

一、自定义v-el-select-lazyloading指令

可以在全局main.js文件中定义，可全局使用

代码如下（示例）：

Vue.directive('el-select-lazyloading', {
  bind(el, binding) {
    let SELECT_DOM = el.querySelector(
      ".el-select-dropdown .el-select-dropdown__wrap"
    );
    SELECT_DOM.addEventListener("scroll", function () {
      let condition =
        this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (condition) {
        binding.value();
      }
    });
  }
})

二、页面el-select中使用v-el-select-lazyloading和filterValue

代码如下（示例）：

<template>
  <div>
    <el-select
      filterable
      :filter-method="filterValue"
      v-model="id"
      @change="selectChange"
      clearable
      v-el-select-lazyloading="lazyloading"
    >
      <el-option
        v-for="item in List"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import {
  getListing //获取列表数据的接口
} from "@/api/api.js";
export default {
  name: "",
  data() {
    return {
      id: "",
      List: [],
      queryParams: {
        page: 1, //页码
        perPage: 10, //每页数量
        name: "" //搜索输入
      }
    };
  },
  methods: {
    //获取列表数据
    getList() {
      getListing(this.queryParams).then(res => {
        if (res.code == 200) {
          this.List = JSON.parse(
            JSON.stringify([...this.List, ...res.content.data])
          );
        }
      });
    },
    //下拉框懒加载
    lazyloading() {
      this.queryParams.page++;
      this.getList();
    },
    //下拉框搜索
    filterValue(value) {
      this.List = [];
      this.queryParams.page = 1;
      this.queryParams.name = value;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

三、使用细节

使用该自定义v-el-select-lazyloading指令时，必须保持页面比例为100%，否则自定义懒加载无效。