el-select下拉选择缓存的实现

<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>

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;
		}
	},
	...
}