el-select下拉选择缓存的实现
作者：weixin_43939111
本文主要介绍了在使用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="hideOption" @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>
js
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 => this.variables_columns.some(v => v==item.value)
)
}
},
turnOption(val){//缓存选项
if(!this.startOption)this.lastOperation.data = this.checkList.map(item => item.value);
this.startOperation = true;
let item = [];
if(this.optionVisable){//下拉框显示时
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.tableData.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下拉选择缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！