在大量数据情况下，el-select的平滑查看数据和搜索数据
须知：
filter-method（自定义搜索方法）为el-select自带的属性
v-el-select-load-more为自定义指令 ======> 解决了一次性渲染大量数据问题
this.examPaperSelStore.list为总数据
paperList为下拉列表的数据
rangeNumber为下拉框滚动到底部后新增的条数
<el-select v-model="record.paperArr" multiple filterable clearable placeholder="请选择" :filter-method='examPaperFilter' v-el-select-load-more:rangeNumber="loadMoreFun(rangeNumber)" style="width: 100%;">
<el-option
v-for="item in paperList.slice(0, rangeNumber)"
:key="item.id"
:label='item.id + "-" + item.name'
:value="item.id">
</el-option>
</el-select>
export default {
data() {
return {
paperList: [], //展示在下拉框内的数据
rangeNumber: 20 //下拉框滚动到底部后新增的条数
}
},
//监听el-select绑定的数据
watch: {
'record.paperArr'(newVal,oldVal){
// 清空输入框后重新给下拉内容赋值 (我这里的el-select是在dialog内，所以加了dialogAddVisible 和dialogUpdateVisible的判断,因为record.paperArr是数据所以要判断长度是否为0)
if((this.dialogAddVisible || this.dialogUpdateVisible) && (!newVal || newVal.length === 0)) {
this.paperList = this.examPaperSelStore.list;
}
},
},
//注册一个自定义指令 `v-el-select-load-more`
directives:{
'el-select-load-more':{
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function () {
/**
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) binding.value()
});
}
}
},
methods: {
loadMoreFun(n){
//每次滚动到底部可以新增条数
return () => this.rangeNumber += this.addNumber
},
examPaperFilter(val) {
//this.examPaperSelStore.list为获取到的全部数据
this.paperList = this.examPaperSelStore.list;
if (val) {
this.paperList = this.paperList.filter(item => {
//由于我这里展示的是id和name的拼接的内容，所以检测id和name是否包含的输入的内容
if(item.name.includes(val) || item.id.toString().includes(val)){
return item;
}
})
}
}
}
}
参考地址： el-select的数据太多时候导致卡顿
修改时，展示已选中的选项（已使用上面的解决方法的情况下）
// 解决方案是：在展示前，循环总数据把选中的放在paperList的最前面
let paperArr = [1,2,3];
this.record = {
paperArr: paperArr
};
for (const item of this.examPaperSelStore.list) {
if (paperArr.indexOf(item.id) !== -1) {
this.paperList.splice(0,0, item)
} else {
this.paperList.push(item);
}
}
