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="pag
20000
e"> </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>

效果