element ui 下拉框分页（下拉框数据过多）

下拉框数据过多

Element UI中的下拉框是一个非常使用的组件。但是在实际开发中会遇到数据过多的问题。
最近的项目中需要使用下拉框来展示物料信息，但是物料信息有9000多条，最初是全部加载，但是会造成渲染特别的慢。后来采取的解决方式是后台每次返回30条数据，再通过远程搜索的方式获取需要的数据。采用远程搜索也存在一个问题，因为每次只显示30条，如果输入的关键字过短，你想要查找的值会不在这30条数据里，只能进一步的明确关键字。后来百度了一下，有个解决方案是在下拉框中实现分页，然后我自己也简单写了一个。

注：我是根据自己的业务写的，不会通用，而且会存在一些bug。如果有需要可以在此基础上自己再修改。

代码：

<template>
    <div>
        <el-select
            :disabled="disabled"
            :multiple="multiple"
            clearable
            filterable
            remote
            :remote-method="remoteSearch"
            placeholder="请选择"
            v-model="selectValue"
            @change="handleChange"
            @visible-change="handleVisible">
            <div class="option">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </div>
            <div class="pagin">
                <el-pagination small layout="prev, pager, next, total" :page-size="pageSize" :total="pageNumberAll" :current-page="pageNumber" @current-change="page"> </el-pagination>
            </div>
        </el-select>
    </div>
</template>

<script>

export default {
     
    components: {
     },
    props: {
     
        // 绑定的值（双向绑定显示的值）
        select: {
     
            type: [String,Array],
            required: true
        },
        // 是否多选
        multiple: {
     
            type: Boolean,
            default: false
        },
        // 请求地址
        url: {
     
            type: String,
            required: true
        },
        // 是否禁用
        disabled: {
     
            type: Boolean,
            default: false
        },
        // 模糊查询关键字
        filrerKey: {
     
            type: String,
            default: ''
        },
        // 下拉修改时使用到的参数
        editinfo: {
     
            type: Object,
            default: () => {
     }
        },
        // 回调函数
        callback: {
     
            type: Function
        }
    },
    data() {
     
        // 这里存放数据
        return {
     
            options: [],
            selectValue: '',
            pageNumber: 1,
            pageSize: 30,
            pageNumberAll: 0
        };
    },
    mounted() {
     
        // 函数调用顺序要在options赋值为空数组之后
        this.initData();
        this.getOptionList();
    },
    // 方法集合
    methods: {
     
        // 处理值改变事件
        handleChange(value) {
     
            this.$emit('update:select',value);
        },
        // 下拉框隐藏事件
        handleVisible(val) {
     
            // 下拉框隐藏后重新加载下拉数据
            if(!val) {
     
                this.getOptionList();
            }
        },
        // 过滤，实现模糊查询
        remoteSearch(value = '') {
     
            let params = {
     };
            let that = this;
            if(value) {
     
                params = {
     
                    queryConfig: [{
     
                        name: that.filrerKey,
                        condition: 'like',
                        value: value
                    }]
                };
            }
            this.getOptionList(params);
        },
        // 获取列表数据
        getOptionList(query = {
     }) {
     
            this.options = [];
            let params = Object.assign({
     
                pageSize: 30,
                pageNumber: 1
            },query);
            this.$http.post(this.url,params)
                .then(({
     data: d}) => {
     
                    if(d.code == 0) {
     
                        this.pageNumberAll = d.data.total;
                        d.data.records.forEach(item => {
     
                            this.options.push({
     
                                label: item.materialName,
                                value: item.materialNo
                            });
                        });
                    }
                });
            // 这里主要针对修改操作，如果当前下拉显示的值没有在下拉选项数组里（因为options数组里的值是会变化的）
            // 显示时会将value转换成字符串然后显示，所有将这条修改的数据添加到选项数组中
            if(this.editinfo && (JSON.stringify(this.editinfo)) != '{}') {
     
                this.options.push(this.editinfo);
            }
        },
        // 初始化数据
        initData() {
     
            // 当父组件上存在值时，对select值进行初始化
            this.selectValue = this.select;
        },
        // 主表格分页点击事件
        page(page) {
     
            this.pageNumber = page;
            this.getOptionList(); // 更新
        }
    }
};
</script>
<style lang="scss" scoped>
.option{
     
    height: 200px;
    overflow-y: auto;
}
.pagin{
     
    background:#fff;
}
::-webkit-scrollbar{
     
    width: 10px;
}
</style>

效果