element-ui-解决下拉框数据量过多问题（vue-virtual-scroll-list）_element-ui下拉框数据太多如何优化-CSDN博客
的升级版
参考链接：封装el-select，实现虚拟滚动,可单选、多选、搜索查询、创建条目-CSDN博客
1.封装组件
select.vue
<template> <div> <el-select popper-class="virtualselect" class="virtual-select-custom-style" :popper-append-to-body="false" :value="defaultValue" filterable :filter-method="filterMethod" default-first-option clearable :placeholder="placeholderParams" :multiple="isMultiple" :allow-create="allowCreate" @visible-change="visibleChange" v-on="$listeners" @clear="clearChange" > <virtual-list ref="virtualList" class="virtualselect-list" :data-key="value" :data-sources="selectArr" :data-component="itemComponent" :keeps="keepsParams" :extra-props="{ label: label, value: value, isRight: isRight, isConcat: isConcat, concatSymbol: concatSymbol }" ></virtual-list> </el-select> </div> </template> <script> import { validatenull } from '@/utils' import virtualList from 'vue-virtual-scroll-list' import ElOptionNode from './el-option-node' export default { components: { 'virtual-list': virtualList }, model: { prop: 'bindValue', event: 'change' }, props: { // // 父组件传的值 // selectData: { // type: Object, // default() { // return {} // } // }, // 数组 list: { type: Array, default() { return [] } }, // 显示名称 label: { type: String, default: '' }, // 标识 value: { type: String, default: '' }, // 是否拼接label | value isConcat: { type: Boolean, default: false }, // 拼接label、value符号 concatSymbol: { type: String, default: ' | ' }, // 显示右边 isRight: { type: Boolean, default: false }, // 加载条数 keepsParams: { type: Number, default: 10 }, // 绑定的默认值 bindValue: { type: [String, Array], default() { if (typeof this.bindValue === 'string') return '' return [] } }, // 是否多选 isMultiple: { type: Boolean, default: false }, placeholderParams: { type: String, default: '请选择' }, // 是否允许创建条目 allowCreate: { type: Boolean, default: false } }, data() { return { itemComponent: ElOptionNode, selectArr: [], defaultValue: null // 绑定的默认值 } }, watch: { 'list'() { this.init() }, bindValue: { handler(val, oldVal) { this.defaultValue = this.bindValue if (validatenull(val)) this.clearChange() this.init() }, immediate: false, deep: true } }, mounted() { this.defaultValue = this.bindValue this.init() }, methods: { init() { if (!this.defaultValue || this.defaultValue?.length === 0) { this.selectArr = this.list } else { // 回显问题 // 由于只渲染固定keepsParams（10）条数据,当默认数据处于10条之外,在回显的时候会显示异常 // 解决方法:遍历所有数据,将对应回显的那一条数据放在第一条即可 this.selectArr = JSON.parse(JSON.stringify(this.list)) let obj = {} if (typeof this.defaultValue === 'string' && !this.isMultiple) { if (this.allowCreate) { const arr = this.selectArr.filter(val => { return val[this.value] === this.defaultValue }) if (arr.length === 0) { const item = {} // item[this.value] = `Create-${this.defaultValue}` item[this.value] = this.defaultValue item[this.label] = this.defaultValue item.allowCreate = true this.selectArr.push(item) this.$emit('selChange', item) } else { this.$emit('selChange', arr[0]) } } // 单选 for (let i = 0; i < this.selectArr.length; i++) { const element = this.selectArr[i] if (element[this.value]?.toLowerCase() === this.defaultValue?.toLowerCase()) { obj = element this.selectArr?.splice(i, 1) break } } this.selectArr?.unshift(obj) } else if (this.isMultiple) { if (this.allowCreate) { this.defaultValue.map(v => { const arr = this.selectArr.filter(val => { return val[this.value] === v }) if (arr?.length === 0) { const item = {} // item[this.value] = `Create-${v}` item[this.value] = v item[this.label] = v item.allowCreate = true this.selectArr.push(item) this.$emit('selChange', item) } else { this.$emit('selChange', arr[0]) } }) } // 多选 for (let i = 0; i < this.selectArr.length; i++) { const element = this.selectArr[i] this.defaultValue?.map(val => { if (element[this.value]?.toLowerCase() === val?.toLowerCase()) { obj = element this.selectArr?.splice(i, 1) this.selectArr?.unshift(obj) } }) } } } }, // 搜索 filterMethod(query) { if (!validatenull(query?.trim())) { this.$refs.virtualList.scrollToIndex(0) // 滚动到顶部 setTimeout(() => { this.selectArr = this.list.filter(item => { return this.isRight || this.isConcat ? (item[this.label].trim()?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) > -1 || item[this.value]?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) > -1) : item[this.label]?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) > -1 }) }, 100) } else { setTimeout(() => { this.init() }, 100) } }, visibleChange(bool) { if (!bool) { this.$refs.virtualList.reset() this.init() } }, clearChange() { if (typeof this.defaultValue === 'string') { this.defaultValue = '' } else if (this.isMultiple) { this.defaultValue = [] } this.visibleChange(false) } } } </script> <style lang="scss" scoped> .virtualselect { // 设置最大高度 &-list { max-height:245px; overflow-y:auto; } .el-scrollbar .el-scrollbar__bar.is-vertical { width: 0; } } </style>
el-option-node.vue
<template> <el-option :key="label+value" :label="concatString(source[label], source[value])" :value="source[value]" :disabled="source.disabled" :title="concatString(source[label], source[value])" > <span>{{ concatString(source[label], source[value]) }}</span> <span v-if="isRight" style="float:right;color:#939393" >{{ source[value] }}</span> </el-option> </template> <script> export default { name: 'ItemComponent', props: { // 每一行的索引 index: { type: Number, default: 0 }, // 每一行的内容 source: { type: Object, default() { return {} } }, // 需要显示的名称 label: { type: String, default: '' }, // 绑定的值 value: { type: String, default: '' }, // 是否拼接label | value isConcat: { type: Boolean, default: false }, // 拼接label、value符号 concatSymbol: { type: String, default: ' | ' }, // 右侧是否显示绑定的值 isRight: { type: Boolean, default() { return false } } }, methods: { concatString(a, b) { a = a || '' b = b || '' if (this.isConcat) { // return a + ((a && b) ? ' | ' : '') + b return a + ((a && b) ? this.concatSymbol : '') + b } return a } } } </script>
2.使用：
第一层组件：insuplc.vue
<template> <cw-select v-model="value" :list="list" label="name" value="value" :class="classname" :disabled="disabled" :placeholder-params="placeholder" :keeps-params="10" :is-concat="false" :is-multiple="isMultiple" :is-right="false" :allow-create="false" @change="selectChange" /> </template> <script> import CwSelect from '@/components/virtualScrollList/select.vue' export default { name:'insuplc', components: { CwSelect }, props: { isMultiple: { type: Boolean, default: false }, defaultValue: { }, disabled: { type: Boolean }, classname: { type: Object }, placeholder: { type: String }, }, computed: { insuplcList() {//医保区划 return this.$store.state.app.ybDictMap.yb_insuplc }, }, watch: { defaultValue:{ handler(newVal) { this.value = newVal }, immediate: true, deep: true } }, data() { return { value:this.defaultValue, list:[] }; }, mounted() { this.list = JSON.parse(JSON.stringify(this.insuplcList)) }, methods: { selectChange(val) { this.$emit('change', {value:val}) } } }; </script>
第二层：
<insuplc :isMultiple="true" style="display:inline-block;width: 100%;" placeholder='请选择' :defaultValue="form.insuplc" @change="(val) => changeInsuplc(val)" />
