el-select 多选时与表格联动

el-select 多选时与表格联动，表格内容与select框的内容相关，效果如图

el-select 选项删除时，表格也跟着对应删除，如图

代码如下：

HTML:

<template>
	  <el-select v-model="value1" multiple placeholder="请选择" @change="change" multiple>
	    <el-option
	      v-for="item in options"
	      :key="item.value"
	      :label="item.label"
	      :value="item.value">
	    </el-option>
	  </el-select>
	
	   <el-table
	      :data="tableData"
	      style="width: 100%">
	      <el-table-column
	        prop="name"
	        label="名称"
	        width="180">
	      </el-table-column>
	    </el-table>
	</template>

JS代码:

var Main = {
	    data() {
	      return {
	        options: [{
	          value: '选项1',
	          label: '黄金糕'
	        }, {
	          value: '选项2',
	          label: '双皮奶'
	        }, {
	          value: '选项3',
	          label: '蚵仔煎'
	        }, {
	          value: '选项4',
	          label: '龙须面'
	        }, {
	          value: '选项5',
	          label: '北京烤鸭'
	        }],
	        value1: [],
	        value2: [],
	        tableData:[]
	     	 }
	    },
	  methods:{
	    change(val) {
	         // 当添加的有重复的时候去掉重复项
	       if(this.tableData.length > 0) {
	         this.value1.forEach(element =>{
	           this.tableData.forEach((item,index) =>{
	             if(element == item.value) {
	                this.tableData.splice(index,1);
	              }
	           })
	         })
	       }
	      
	      // 添加进表格
	      this.value1.forEach(element =>{
	        this.options.forEach(item =>{
	          if(element == item.value){
	            let obj = {
	              name:item.label,
	              value:item.value
	            }
	            this.tableData.push(obj);
	          }
	        })
	      })
	      
	      // 当选中中删除某一项时
	      // 因为select多选删除时返回的参数不是被删除的项，而是数组中删除项后的剩余项，
	      所以要用差集法找到被删除的那一项，然后把表格中对应的项删除
	      
	      // 表格数据拷贝一份
	      let deleteArr = [];
	      this.tableData.forEach(item =>{
	         deleteArr.push(item)
	       })
	      // 通过遍历 删除得到差集，就是被删除的项
	      val.forEach(element =>{
	          deleteArr.forEach((item,index) =>{
	             if(element == item.value) {
	                deleteArr.splice(index,1);
	              }
	           })
	       })
	      
	      //  表格数组和差集对比 删除select框中删除的对应项
	      this.tableData.forEach((item,index) =>{
	          if(deleteArr.length == 1) {
	             if(item.value == deleteArr[0].value) {
	                this.tableData.splice(index,1)
	             }
	          }
	       })
	      
	    }
	  }
	  }
	var Ctor = Vue.extend(Main)
	new Ctor().$mount('#app')

耶！