<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,//下拉框顯示狀態(tài)，false為隱藏，true為顯示
			lastOperation:{data:[]},//上次選擇
			startOption:false,//判斷是否第一次打開下拉框
			tableData:[{id:0,name:"M1_GRAT"},{id:1,name:"M2_GRAT"},...],//模擬左側(cè)列表數(shù)據(jù)
		}
	},
	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 { //下拉框不顯示，只有刪除選項時觸發(fā)
				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;
		}
	},
	...
}