通过二次
封装el-select组件，可以解决选择公司联系人下拉框数据量过大导致页面卡顿的问题。在这个
封装中，可以使用一个名为"component-people"的组件来代替el-select，并且通过v-model绑定数据和通过props传递参数。以下是实现这个二次
封装的步骤：
1. 首先，在页面中使用"component-people"组件来替代el-select组件。根据引用提供的示例，可以编写如下代码：
```html
<component-people v-model="formData.name" :options="options" selectSize="mini" :multiple="true"></component-people>
```
2. 在main.
js中创建一个滚动指令"el-select-loadmore"，用于监听下拉列表的滚动事件。根据引用提供的示例，可以编写如下代码：
```
javascript
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组件并应用滚动指令。根据引用提供的示例，可以编写如下代码：
```html
<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方法来实现滚动加载的逻辑。可以根据引用和引用提供的示例，编写如下代码：
```
javascript
<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接收参数，并且可以实现滚动加载的功能。
1021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
