本文主要是介绍el-select下拉选择缓存的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...
项目场景：
从左侧列表中选取字段填入右侧下拉多选框，用户可以对右侧已选字段模拟缓存：下拉显示时展示已选字段列表，对选项选中或取消操作时下拉框展示选中与取消的字段；下拉隐藏时，下拉框选项与右侧遗留标签同步。
问题描述
1、查阅资料，通过给el-select绑定@change方法可以监听到选中值的变换（只能获取当前已选中的所有值（array方式存储），如果监听变化的是哪个值，需自定义变量缓存上一次存储与当前选中做对比）。
2、@visible-change监听下拉框的显示与隐藏，会在显示和隐藏时都触发。
3、初始设想：删除输入框内标签时，直接将值返回到左侧列表，下拉框选项数量更新；取消下拉框内选择时，输入框内值删除，下拉框内选项数量保持不变，下拉隐藏时将取消选择的值返回左侧列表。
然而实际发现：change方法无论是输入框选项操作还是下拉框选项操作都会触发，无法区分在哪个区域操作。
解决方案：
改变设计思路：
- 下拉框不显示，添加与删除项同步更新下拉选项
- 下拉框显示时，下拉框缓存初始展示数据。在下拉框中取消选项同时数据项返回左侧列表，重新选中时左侧列表项删除并移入下拉多选，隐藏时下拉框保持最新选中项存储
关键代码：
<template>
<el-select :popper-append-to-body="false" class="hide_error" v-model="variables_columns" multiple @visible-change="hjsideOption" @change="turnOption" placeholder="请选择" id="varia-col-select">
<el-option
v-for="item in checkedList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
export default {
data(){
return {
variables_columns:[],
optionVisible:false,//下拉框显示状态，false为隐藏，true为显示
lastOperation:{data:[]},//上次选择
startOption:false,//判断是否第一次打开下拉框
tableData:[{id:0,name:"M1_GRAT"},{id:1,name:"M2_GRAT"},...],//模拟左侧列表数据
}
},
methods:{
hideOption(){//隐藏时更新下拉选项
this.optionVisible = !this.optionVisible;
if(!this.optionVisible){
this.checkList = this.checkList.filter(
item => thisjavascript.variables_columns.some(v => v==item.value)
)
}
},
turnOption(val){//缓存选项
if(!th编程is.startOption)this.lastOperation.data = this.checkList.map(item => item.value);
this.startOperation = true;
let item = [];
if(this.optionVisable){//下拉框显http://www.chinasem.cn示时
if(this.lastOperation.data.length>val.length){//取消选项操作
item = this.lastOperatin.data.filter(v => !val.some(v1 => v1 == v));
let backNode = {id:this.tableData.length,name:item[0]};//返回的元素
this.tableData.push(backNode);
}else{//在下拉框中重新选中
let delNode = val.filter(v1 => !this.lastOperation.data.some(v2 => v1 == v2));
this.tableData = this.tChina编程ableData.filter(v => v.name != delNode[0])
}
} else { //下拉框不显示，只有删除选项时触发
item = this.checkedList.filter(v => !val.some(v1 => v1 == v.value));
this.checkList = this.checkList.filter(v => val.some(v1 => v.value));
let backNode = {id:this.tableData.length,name:item[0].value}
this.tableData.push(backNode);
}
this.lastOperation.data = val;
}
},
...
}
备注：①:popper-append-to-body="false"可将下拉框dom嵌入div中，方便调整多选下拉框样式②multiple是el-select多选必须添加的属性
到此这篇关于el-select下拉选择缓存的实现的文章就介绍到这了,更多相关el-select下拉选择缓存内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)！
这篇关于el-select下拉选择缓存的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
