1.效果图

 2.实现代码 

<template>
  <div>
         <div class="box_cm">
             <div class="box_cm_list">
                 <el-table 
              :data="tableData" height="65vh" 
              border
              ref="tableLeft"
              :row-key="getRowKeys"
              >
              <el-table-column label="可借用xxxxx">
                <el-table-column
                 type="selection"
                 :reserve-selection="true"
                  width="55"
               ></el-table-column>
               <el-table-column 
                  align="center"
                  show-overflow-tooltip
                  v-for="(item,oks) in tableLabel"
                 :key="oks"
                 :label="item.label"
                 :min-width="item.width ? item.width : 118"
                >
                 <template slot-scope="scope">
                    <div>
                        {{scope.row[item.prop]}}
                  </div>
                    
               </template>
              </el-table-column>
             </el-table-column>
           </el-table>
             </div>

              <div class="box_cm_list_cm">
                 <div>
                   <el-button @click="Right" type="primary" style="background:#1890ff;color:white">
                     <i class="el-icon-arrow-right"></i>
                  </el-button>
                 </div>
                 <div>
                     <el-button @click="Left" :disabled="!selectedStaffData.length" type="primary" style="background:#1890ff;color:white" icon="el-icon-arrow-left"></el-button>
                 </div>
           </div>

             <div class="box_cm_list">
                <el-table 
               :data="selectedStaffList" 
               height="65vh" 
               border
                ref="tableRight"
               :row-key="getRowKeys"
               @selection-change="handleSelectedStaffChange"
             >
              <el-table-column label="确定借用xxxxx">
              <el-table-column
                  type="selection"
                  :reserve-selection="true"
                   width="55"
               ></el-table-column>
               <el-table-column 
                  align="center"
                  show-overflow-tooltip
                  v-for="item in tableLabel"
                  :key="item.prop"
                 :label="item.label"
                 :min-width="item.width ? item.width : 118"
              >
               <template slot-scope="scope">
                  <div>
                        {{scope.row[item.prop]}}
                  </div>
                    
               </template>
            </el-table-column>
           </el-table-column>
         </el-table>
        </div>
     </div>
  </div>
</template>
<script>
export default {
   data(){
      return{
         tableData: [
           {
             fnumber:'56-01-01',
             corptype:'无',
             corpte:'广东xxx国际xxx公司',
             corppe: '李xx',
             crptype11:'xx省xx市xx镇',
             id: 1,
           },
           {
             fnumber:'56-02-02',
             corptype:'无',
             corpte:'福建xxx国际xxx公司',
             corppe: '何xx',
             crptype11:'xx省xx市xx镇',
             id: 2,
           },
           {
             fnumber:'56-03-03',
             corptype:'无',
             corpte:'广西xxx国际xxx公司',
             corppe: '陈xx',
             crptype11:'xx省xx市xx镇',
             id: 3,
           },
           {
             fnumber:'56-04-04',
             corptype:'无',
             corpte:'江西xxx国际xxx公司',
             corppe: '林xx',
             crptype11:'xx省xx市xx镇',
             id: 4,
           },
           {
             fnumber:'56-05-05',
             corptype:'有',
             corpte:'山西xxx国际xxx公司',
             corppe: '马xx',
             crptype11:'xx省xx市xx镇',
             id: 5,
           }
         ],
         selectedStaffList: [],
         selectedStaffData: [],
         tableLabel: [ //对应table表格字段，名称，宽度
            {
                prop:"fnumber",
                label:"档号",
                width: 110,
           },
           {
               prop:"corptype",
               label:"案卷题名",
               width: 90,
           },
           {
               prop:"corpte",
               label:"企业名称",
               width: 110,
           },
           {
               prop:"corppe",
               label:"法人代表",
               width: 110,
           },
           {
               prop:"crptype11",
               label:"企业地址",
               width: 110,
           },
         ],
      }
   },
   methods:{
     getRowKeys(){
        
     },
     //将右边表格选择项存入selectedStaffData中
    handleSelectedStaffChange(rows) {
      this.selectedStaffData = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.selectedStaffData.push(row);
          }
        });
      }
    },
     //左到右
     Right(){
      console.log('左表格数据',this.$refs.tableLeft.selection);
      if (this.$refs.tableLeft.selection.length === 0) {
        this.$notify({
          title: "提示",
          message: "请选择xxxxx",
          type: "success",
          duration: 2000,
        });
        return;
      } else {
        this.selectedStaffList = this.selectedStaffList.concat( this.$refs.tableLeft.selection );
        // 复制数组对象
        let selectList = JSON.parse(
          JSON.stringify(this.$refs.tableLeft.selection)
        );
        selectList.forEach((item) => {
          let index = this.tableData.findIndex((_item) => _item.id === item.id);
          if (index !== undefined) {
            this.tableData.splice(index, 1);
          }
        });
        this.$refs.tableLeft.clearSelection();
      }
     },
     //右到左
     Left(){
        setTimeout(() => {
        this.$refs["tableLeft"].clearSelection();
        this.$refs["tableRight"].clearSelection();
      }, 0);
       this.selectedStaffData.forEach((item) => {
        this.tableData.push(item);
      });
      //  console.log(22,this.selectedStaffList );
      //  console.log(33,this.selectedStaffData );
       let arr =  this.selectedStaffList.filter((v) => this.selectedStaffData.every((val) => val.id!= v.id))
        console.log('--111',arr)
        this.selectedStaffList = arr
     },
   }
}
</script>
<style>
.box_cm {
  display: flex;
}
.box_cm .box_cm_list {
  width: 48%;
  height:65vh;
}
.box_cm .box_cm_list_cm {
  width: 6%;
  height: 65vh;
  text-align: center;
  padding-top: 14vh;
}
.box_cm .box_cm_list_cm div {
  line-height: 14vh;
}

</style>

//仅供参考,如有雷同,纯属虚构