【项目笔记】：elementui下拉框数据太多造成页面卡顿怎么解决？_vue下拉框数据太大加载慢

一.前言

        开发过程中未出现卡顿现象，在测试的时候出现了卡顿现象，下拉框压根打不开，针对这个问题做了以下优化。

二.解决办法

1. 首先可以用原生js封装一个下拉框，这样确实能提高前端性能，但是不多，我说实话。
2. 每次进来加载默认值（上一次选的值）的后十条数据，这样的话我觉得可能就是数据不卡了，但是明显多了http请求，不符合雅虎三十五军规。
3. 下拉框做数据懒加载

三.下拉框数据做懒加载

思路：通过监听下拉框的滚动条进行加载下拉框数据。针对下拉框搜索功能，我们做了节流。下面是一个小demo,可以根据需求选取有用的片段。

废话不多说，上菜！

html代码：

<el-select v-model="form.value" filterable v-el-select-loadmore="loadMore" :filter-method="selectFilter"
            @visible-change="selectVisible" placeholder="请选择" :popper-append-to-body="false">
            <el-option v-for="item in options_.slice(0, range)" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
</el-select>

js代码：

<script>
export default {
    name: "AboutView",
    data () {
        return {
            options: [],//总下拉数据
            options_: [],//过渡下拉数据
            range: 100,//初始渲染条数基数
            filterTime: null,//自定义查询功能的节流定时器
            form: {
                value: ""
            }
        }
    },
    directives: {
 
        'el-select-loadmore': {
 
            bind (el, binding) {
 
                // 获取element-ui定义好的scroll盒子 监听滚动条加载数据
 
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
 
                SELECTWRAP_DOM.addEventListener('scroll', function () {
                    const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop - SELECTWRAP_DOM.clientHeight;
                    if (condition <= 10) {
                        binding.value()
                    }
                });
            }
        }
    },
 
    methods: {
        getList () {
            for (let i = 0; i < 100000; i++) {
                this.options.push({
                    label: "数据" + i,
                    value: "数据" + i
                })
            }
        },
        loadMore () {
            //传入指令的增加渲染条数方法
            this.range += 50;
        },
        selectFilter (val) {
            // 自定义下拉查询方法 做了节流
            if (this.filterTime) {
                clearTimeout(this.filterTime);
                this.filterTime = null;
            }
            this.filterTime = setTimeout(() => {
                if (val) {
                    let filterArr = this.options.filter(item => {
                        return item.label.toLowerCase().includes(val.toLowerCase());
                    });
                    this.options_ = filterArr;
                } else {
                    this.options_ = this.options
                }
            }, 500);
        },
        selectVisible (v) {
            //下拉框显隐监听事件 控制渲染初始数据以及恢复总数据
            this.range = 100;
            if (!v) this.options_ = this.options;
        },
    },
    created () {
        this.getList();
    }
}
</script>

效果图：