解决elements中下拉框数据展示太多卡死的问题

<template>
    <div class="content">
         <el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)" filterable>
             <el-option
             v-for="(item, index) in list.slice(0, rangeNumber)" 
             :key="index"
             :label="item.label"
             :value="item.value"></el-option>
         </el-select>
    </div>
</template>
 
<script>
import Vue from "vue";
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 () {
                /**
                * 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()
            });
        }
    }
)
export default {
  name:'aa-a',
    data() {
        return {
           list: [],
           choose: "",
           rangeNumber: 10,
        }
    },
    created(){
       this.getList()
    },
    methods: {
        getList(){
            for(let i = 0; i < 100000; i++){
                this.list.push({
                   label: "menu",
                   value: "menu"
                })
            }//测试数据10万条数据, 这里数据多少条无所谓,list.slice(0, rangeNumber)方法只会默认加载初始的10条数据
        },
        loadMore(n){
          console.log(n,'n')
            //n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
            //if(n < 8) this.rangeNumber = 10 //elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
            return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数  可自定义
        },
    }
}
</script>
 
<style lang="less" scoped>
.content{
   padding: 24px 24px;
   .el-input{
       width: 400px;
       margin: 20px;
   }
}
</style>

场景二   10万条数据客户不可能一直滚动下去找自己想要数据,这时候就需要搜索解决

下面代码没有用el-select搜索是因为在使用过程中发现模糊查询不能满足自己,所以自己就写了一个input框,使用watch监听,详情见代码

<template>
    <div class="content">
         <el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)">
             <el-input v-model="search" size="small" placeholder="请输入搜索内容"></el-input>
             <el-option
             v-for="(item, index) in list.slice(0, rangeNumber)" 
             :key="index"
             :label="item.label"
             :value="item.value"></el-option>
         </el-select>
    </div>
</template>
 
<script>
import Vue from "vue";
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 () {
                /**
                * 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()
            });
        }
    }
)
export default {
    data() {
        return {
           list: [],
           choose: "",
           rangeNumber: 10,
           stashList: [],
           search: ""
        }
    },
    created(){
       this.getList()
    },
    watch: {
        search(newVal, oldVal){
            if(newVal){
                this.list = this.stashList
                this.list = this.list.filter(item => {
                    if(item.label.includes(newVal)){
                        return item
                    }
                })
            }else{
                this.list = this.stashList
            }
        }
    },
    methods: {
        getList(){
            for(let i = 0; i < 100000; i++){
                this.list.push({
                   label: "menu" + i,
                   value: "menu" + i
                })
            }//测试数据10万条数据, 这里数据多少条无所谓,list.slice(0, rangeNumber)方法只会默认加载初始的10条数据
            this.stashList = this.list
        },
        loadMore(n){
            //n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
            //if(n < 8) this.rangeNumber = 10 //elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
            return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数  可自定义
        },
    }
}
</script>
 
<style lang="less" scoped>
.content{
   padding: 24px 24px;
   .el-input{
       width: 400px;
       margin: 20px;
   }
}
</style>