vue2的el-select虚拟下拉
说明
vue3的的el-select，Element Plus封装了虚拟下拉的写法，但是有些vue2版本的el-select却没办法用虚拟下拉。如果下拉列表数据量大的话，很导致极度卡顿。那我们就自己封装一个吧
代码
components下新建elselectV2文件夹，新建两个文件：elOptionNode.vue和VirtualSelect.vue。
elOptionNode.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: 'ElOptionNode',
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) ? this.concatSymbol : '') + b
}
return a
}
}
}
</script>
VirtualSelect.vue代码如下
<template>
<el-select
popper-class="virtualselect"
class="virtual-select-custom-style"
:value="defaultValue"
filterable
:filter-method="filterMethod"
default-first-option
clearable
:placeholder="placeholder"
:disabled="disabled"
: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>
</template>
<script>
const validatenull = (val) => {
if (typeof val === 'boolean') {
return false
}
if (typeof val === 'number') {
return false
}
if (val instanceof Array) {
if (val.length===0) return true
} else if (val instanceof Object) {
if (JSON.stringify(val) === '{}') return true
} else {
if (val==='null' || val===null || val==='undefined' || val===undefined || val==='') return true
return false
}
return false
}
import virtualList from 'vue-virtual-scroll-list'
import ElOptionNode from './elOptionNode.vue'
export default {
name: 'VirtualSelect',
components: {
'virtual-list': virtualList
},
model: {
prop: 'bindValue',
event: 'change'
},
props: {
// 数组
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, Number, Array],
default() {
if (typeof this.bindValue === 'string') return ''
return []
}
},
// 是否多选
isMultiple: {
type: Boolean,
default: false
},
// 输入框占位文本
placeholder: {
type: String,
default: '请选择'
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否允许创建条目
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()
}
this.$emit('visible-change', bool)
},
clearChange() {
if (typeof this.defaultValue === 'string') {
this.defaultValue = ''
} else if (this.isMultiple) {
this.defaultValue = []
}
this.visibleChange(false)
}
}
}
</script>
<style scoped>
/* .virtual-select-custom-style ::v-deep .el-select-dropdown__item {
// 设置最大宽度，超出省略号，鼠标悬浮显示
// options 需写 :title="source[label]"
width: 250px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} */
.virtualselect {
max-height:245px;
overflow-y:auto;
/* // 设置最大高度
&-list {
max-height:245px;
overflow-y:auto;
} */
}
.virtualselect-list {
max-height:245px;
overflow-y:auto;
}
.el-select {
width: 100%;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
cursor: pointer;
margin-right: 5px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(144,147,153,.3) !important;
border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover{
background-color: rgba(144,147,153,.5) !important;
}
::-webkit-scrollbar-track {
background-color: transparent !important;
border-radius: 3px !important;
-webkit-box-shadow: none !important;
}
::v-deep .el-select__tags {
flex-wrap: unset;
overflow: auto;
}
</style>
<style>
.virtualselect .el-select-dropdown__item{
display: block;
//max-width: 350px;
overflow: visible;
}
</style>
用法
引入组件
import ElSelectV2 from '@/components/elSelectV2/VirtualSelect.vue';
使用组件，和el-select基本一致，具体参数见上面的注释
<el-select-v2
v-model.trim="form.value"
:list="selectListData"
label="label"
value="value"
placeholder="请选择"
multiple
collapse-tags
filterable
@change="(val) => changeSelect"
/>