select 二次封装

通过二次封装el-select组件，可以解决选择公司联系人下拉框数据量过大导致页面卡顿的问题。在这个封装中，可以使用一个名为"component-people"的组件来代替el-select，并且通过v-model绑定数据和通过props传递参数。以下是实现这个二次封装的步骤：

1. 首先，在页面中使用"component-people"组件来替代el-select组件。根据引用提供的示例，可以编写如下代码：

<component-people v-model="formData.name" :options="options" selectSize="mini" :multiple="true"></component-people>

2. 在main.js中创建一个滚动指令"el-select-loadmore"，用于监听下拉列表的滚动事件。根据引用提供的示例，可以编写如下代码：

Vue.directive('el-select-loadmore', {
  bind(el, binding) {
    let self = this;

    // 获取element-ui定义好的scroll盒子
    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. 上述代码中的"el-select-loadmore"指令可以被应用到"component-people"组件上，以实现滚动加载功能。在"component-people"组件的模板中，可以添加el-select组件并应用滚动指令。根据引用提供的示例，可以编写如下代码：

<template>
  <div>
    <el-select v-model="value" :multiple="multiple" :size="selectSize" v-el-select-loadmore="loadMore">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>

4. 在"component-people"组件的script部分，可以定义相应的props和data，并且提供loadMore方法来实现滚动加载的逻辑。可以根据引用和引用提供的示例，编写如下代码：

<script>
export default {
  props: {
    value: {
      type: [String, Array],
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    selectSize: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // ...
    };
  },
  methods: {
    loadMore() {
      // 滚动加载的逻辑
      // ...
    }
  }
}
</script>

通过以上步骤，可以实现对el-select组件的二次封装，解决选择公司联系人下拉框数据量过大导致页面卡顿的问题。二次封装后的组件"component-people"可以通过v-model绑定数据，通过props接收参数，并且可以实现滚动加载的功能。