基于element-ui封住Select下拉框

 最近工作上用到Select框需要搜索以及分页懒加载等功能，将其封装组件

<template>
  <el-select
    filterable
    @change="onChange"
    v-model="obj.keyId"
    v-select="loadMore"
    @clear="onClear"
    @focus="onFocus"
    :clearable="true"
    :filter-method="onSearch"
    style="width: 100%"
    placeholder="请选择"
  >
    <el-option
      v-for="item in deepList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    //传进来的数据
    list: {
      type: Array,
    },
    //v-model绑定的值
    obj: {
      type: Object,
      default: () => {
        return {
          keyId: null,
          label: null,
        };
      },
    },
    keyName: {
      type: String,
    },
    valueName: {
      type: String,
    },
  },
  data() {
    return {
      deepList: [],//遍历的数据
      timer: null, //防抖
      hasData: true, //拉到底状态
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
    };
  },
  watch: {
  //监听传过来的数据且赋值
    list(val) {
      if (val) {
        this.deepList = this.list;
      }
    },
  //当父组件传过来的数据发生变化时
    obj: {
      deep: true,
      immediate: true,
      handler(val) {
   //判断两个值是否不为null
        if (val.keyId && val.label) {
          //当进来的数组有数据且长度不等于0
          if (this.list && this.list.length != 0) {
            // 取反 判断是否相等
            if (!this.list.some((item) => item.id == val.keyId)) {
              let it = {};
              //统一key名，而不是外部控制
              it[this.keyName] = val.label;
              it[this.valueName] = val.keyId;
              this.list.unshift(it);
               // 更新数据
              this.$emit("update:list", this.list);
            }
          } else {
            let it = {};
            it[this.keyName] = val.label;
            it[this.valueName] = val.keyId;
            this.list.push(it);
            this.$emit("update:list", this.list);
          }
        }
      },
    },
  },
  created() {},
  methods: {
    //每次获取焦点时触发
    onFocus() {
      // 先清空
      this.onRemove();
      const { size } = this.page;
      //触发父组件请求
      this.$emit("loadRequest", null, 1, size, this.receivePage);
    },
    //选中值时触发
    onChange(itemId) {
      if (itemId) {
        let checkObj = this.list.find((item) => {
          let type = item.id === itemId;
          return type;
        });
        //把选中的id与name返回父组件
        let name = checkObj && checkObj.name ? checkObj.name : null;
        let id = checkObj && checkObj.id ? checkObj.id : null;
        this.$emit("change", name, id);
      }
    },
    //点击"X"清空时触发
    onClear() {
      this.$emit("change", null, null);
      this.onRemove();
      const { current, size } = this.page;
      this.$emit("loadRequest", null, current, size, this.receivePage);
    },
    //输入搜索时触发
    onSearch(keyWord) {
      this.hasData = true;
        //防抖
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.onRemove();
        const { current, size } = this.page;
        this.$emit("loadRequest", keyWord, current, size, this.receivePage);
      }, 500);
    },
    //拉到底时触发
    loadMore() {
      if (this.hasData) {
        const { current, size } = this.page;
        this.$emit("loadRequest", null, current + 1, size, this.receivePage);
      } else {
        this.$message.warning("暂无更多数据");
      }
    },
    //接收请求成功的分页数据
    receivePage(total, current, size, hasData) {
      this.page.size = size;
      this.page.current = current;
      this.page.total = total;
      this.hasData = hasData;
    },
    //获取焦点、清空、搜索调用
    onRemove() {
      this.deepList = [];
      this.page.current = 1;
      this.page.total = 0;
      // 当有选中值时
      if (this.obj.keyId && this.obj.label) {
        const params = {
          name: this.obj.label,
          id: this.obj.keyId,
        };
        this.deepList.push(params);
      }
      this.$emit("update:list", this.deepList);
    },
  },
};
</script>

<style>
</style>

 v-select封装的自定义指令，把它挂载vue全局： 

import Vue from 'vue'

//自定义指令 下拉框懒加载
Vue.directive("select", {
  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();
      }
    });
  },
})

需要用到的组件（简略版）

<template>    
   <Select
    :obj="searchParams.comObj"
    :list.sync="communityList"
     keyName="name"
     valueName="id"
     @change="onChangeCom"
     @loadRequest="loadRsqSosCallCommunity"
    ></Select>
</template>
<script>
export default {
data(){
  return{
   searchParams:{
         comObj: {
          keyId: null,
          label: null,
        },
   }
 },
methods:{
 //接收选中的值
 onChangeCom(keyWord, id) {
      this.searchParams.comObj.label = keyWord;
      this.searchParams.comObj.keyId = id;
  },
 //请求接口 参数分别：搜索内容、页码、页数、回调方法
 loadRsqSosCallCommunity(keyWord, current, size, method) {
      let params = {
        name: keyWord,
        current,
        size,
      };
      this.$api
        .loadRsqSosCallCommunity(params)
        .then((res) => {
          if (this.$isResSuccess(res)) {
            const { records, size, current, total } = res.data.data;
            //判断是否有值先
            if (
              this.searchParams.comObj.keyId &&
              this.searchParams.comObj.label
            ) {
               //过滤出不相等的数据
              let filterRecords = records.filter((item) => {
                return item.id != this.searchParams.comObj.keyId;
              });
               // 合并数组
              this.communityList = this.communityList.concat(
                filterRecords || []
              );
            } else {
              this.communityList = this.communityList.concat(records || []);
            }
            //当为true时才发送数据，否则提示暂无更多数据
            method(
              total,
              current,
              size,
              records && records.length == 0 ? false : true 
            );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
},
}
}
<script>

 keyName和valueName是根据后台返回的数据，例如：

最后效果