vue实现多列穿梭框

如图所示：

页面布局

<template>
  <el-dialog
    top="15vh"
    width="80%"
    :visible.sync="visible"
    :append-to-body="true"
    @close="visible = false"
    destroy-on-close="true"
  >
    <div style="height: 400px">
    <el-form  ref="searchForm" :inline="true" label-width="100px" size="small" :model="queryParams" class="demo-form-inline">
      <el-row style="margin-bottom: 10px">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="关键字" prop="gjz">
            <el-input
              v-model="ry.number"
              placeholder="关键字"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          　　&nbsp;
        </el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" style="text-align: right;padding-top: 10px">
          <span style="padding: 4px 20px;border: 1px #000 solid;border-radius: 5px;cursor: pointer" > 查询</span>
        </el-col>
      </el-row>
    </el-form>

      <el-row>
      <el-col :span="10">
        <el-table
          :data="data1"
          border
          height="300px"
          ref="selection"
          @selection-change="checkAll"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="30">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            label="账号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="注册日期"
          >
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="4">
        <div class="opSetting">
          <div @click="handelSelect">
            <el-button icon="el-icon-d-arrow-right" :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary" >
              选中
            </el-button>
          </div>
          <div class="spacing" @click="handleRemoveSelect">
            <el-button icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
              取消
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <el-table
          :data="selectArr"
          border
          height="300px"
          ref="selection"
          @selection-change="checkRightAll"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="30">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            label="账号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="注册日期"
          >
          </el-table-column>
        </el-table>
      </el-col>
      </el-row>

    <el-row style="margin-top:10px ">
      <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
　　　　　　&nbsp;
      </el-col>
      <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="text-align: center;cursor: pointer">
        <span style="padding: 4px 20px;border: 1px #000 solid;border-radius: 5px" > 确定</span>
      </el-col>
      <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="text-align: center;cursor: pointer;">
        <span style="padding: 4px 20px;border: 1px #000 solid;border-radius: 5px" > 关闭</span>
      </el-col>
    </el-row>
    </div>
  </el-dialog>
</template>

js文件

      checkAll(val){
        this.nowSelectData = val;
      },
      checkRightAll(val) {
        this.nowSelectRightData = val;
      },
      // 选中
      handelSelect(){
        debugger
        //右边的数组和左边的数组进行连接
        this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
        //删除左边数组中的元素
        this.handleRemoveTabList(this.nowSelectData,  this.data1);
        this.nowSelectData = [];
      },
      // 取消
      handleRemoveSelect() {
        this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData)
        this.handleRemoveTabList(this.nowSelectRightData,  this.selectArr);
        this.nowSelectRightData = [];
      },
      handleConcatArr(selectArr, nowSelectData) {
        let arr = [];
        arr = arr.concat(selectArr, nowSelectData);
        return arr;
      },
      //在全局中删除被选中的元素
      handleRemoveTabList(isNeedArr,  originalArr) {
        //如果两个数组都不为空
        if(isNeedArr.length && originalArr.length) {
          for(let i=0; i<isNeedArr.length; i++) {
            for(let k=0; k<originalArr.length; k++) {
              debugger
              if(isNeedArr[i]["name"] === originalArr[k]["name"]) {
                originalArr.splice(k, 1);
              }
            }
          }
        }
      },
      init (){
        this.visible=true
      }
    },