vue+element Table穿梭 （未封装）

<div>
   <el-row>
     <el-col :span="13">
       <el-table
         ref="multipleTable"
         :data="operaDataList"
         border
         height="56vh"
         highlight-current-row
         :header-row-style="{ background: '#F2F7FF' }"
         :header-cell-style="{ background: 'transparent' }"
         style="width: 100%"
         key="table2"
         @selection-change="operaAdd"
       >
        <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
       prop="date"
       label="日期"
       width="180">
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="address"
	        label="地址">
	      </el-table-column>
       </el-table>
     </el-col>
     <el-col class="col_center" :span="2">
       <div>
         <el-button size="mini" @click="addOperaData">
           <i class="el-icon-arrow-right"></i>
           <i class="el-icon-arrow-right"></i>
           <i class="el-icon-arrow-right"></i>
         </el-button>
       </div>
       <div>
         <el-button size="mini" @click="delOperaData">
           <i class="el-icon-arrow-left"></i>
           <i class="el-icon-arrow-left"></i>
           <i class="el-icon-arrow-left"></i
         ></el-button>
       </div>
     </el-col>
     <el-col :span="9">
       <el-table
         :data="operaData"
         border
         height="56vh"
         highlight-current-row
         :header-row-style="{ background: '#F2F7FF' }"
         :header-cell-style="{ background: 'transparent' }"
         style="width: 100%"
         key="table5"
         @selection-change="operDel"
       >
         <el-table-column type="selection" width="55"> </el-table-column>
         <el-table-column
	       prop="date"
	       label="日期"
	       width="180">
	     </el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="address"
	        label="地址">
	      </el-table-column>
       </el-table>
     </el-col>
   </el-row>
</div>

export default {
  data() {
    return {
	    operaDataList:[{
	    	id:1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
          	id:2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
          	id:3
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
          	id:4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
	    operaData:[],
	    operaStorage:[],
	    operaDelStorage :[],
	    oldOpera:[]
	    }
    };
     methods: {
   	   operaAdd(items) {
	      this.operaStorage = [...items].concat(this.oldOpera);
	      console.log(this.operaStorage)
	    },
        // 手术穿梭添加按钮>>>
	    addOperaData() {
	      if (this.operaStorage.length == 0)
	        return this.$message.warning("请先选择手术再添加");
	      else if (this.operaData.length == 0) {
	        this.operaData = [...this.operaStorage];
	      } else {
	        let dataList = this.operaData.concat(this.operaStorage);
	        let obj = {};
	        let list = [];
	        for (var i = 0; i < dataList.length; i++) {
	          if (!obj[dataList[i].id]) {
	            list.push(dataList[i]);
	            obj[dataList[i].id] = true;
	          } else {
	            if (document.getElementsByClassName("el-message").length === 0) {
	              this.$message.warning("含有重复的手术，已过滤添加");
	            }
	          }
	        }
	        this.operaData = [...list];
	      }
	      this.oldOpera = []
	      this.$refs.multipleTable.clearSelection();
	    },
	        operDel(items) {
      this.operaDelStorage = [...items];
    },
    // 手术穿梭删除已添加按钮<<<
	    delOperaData() {
	      if (this.operaDelStorage.length == 0)
	        return this.$message.warning("请先选择已添加的手术进行移除");
	      for (let i = 0; i < this.operaData.length; i++) {
	        for (let j = 0; j < this.operaDelStorage.length; j++) {
	          if (this.operaData[i].id== this.operaDelStorage[j].id) {
	            this.operaData.splice(i, 1);
	            i--;
	            break;
	          }
	        }
	      }
	    },
	}
  },