爱站程序员基地下拉框数据过多
Element UI中的下拉框是一个非常使用的组件。但是在实际开发中会遇到数据过多的问题。
最近的项目中需要使用下拉框来展示物料信息，但是物料信息有9000多条，最初是全部加载，但是会造成渲染特别的慢。后来采取的解决方式是后台每次返回30条数据，再通过远程搜索的方式获取需要的数据。采用远程搜索也存在一个问题，因为每次只显示30条，如果输入的关键字过短，你想要查找的值会不在这30条数据里，只能进一步的明确关键字。后来百度了一下，有个解决方案是在下拉框中实现分页，然后我自己也简单写了一个。
注：我是根据自己的业务写的，不会通用，而且会存在一些bug。如果有需要可以在此基础上自己再修改。
代码：
<template><div><el-select:disabled="disabled":multiple="multiple"clearablefilterableremote:remote-method="remoteSearch"placeholder="请选择"v-model="selectValue"@change="handleChange"@visible-change="handleVisible"><div class="option"><el-optionv-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="pag20000e"> </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>
效果
