el-table 穿梭框的实现（可直接复制）

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialog"
    width="60%"
    :close-on-click-modal="false"
    :empty-text="loadInfo"
    center
    size="mini"
    style="lookDiaSty"
    @close="dialogClose"
  >
    <el-table
      :data="table1"
      @selection-change="handleSelectionChange1"
      style="width: 100%">
       <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>
    <div class="btns">
      <el-button type="primary" :disabled="currentTable1.length == 0" @click="toRight">→</el-button>
      <el-button type="primary" :disabled="currentTable2.length == 0" @click="toLeft">←</el-button>
    </div>
    <el-table
      :data="table2"
      @selection-change="handleSelectionChange2"
      style="width: 100%">
       <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>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary">确定</el-button>
      <el-button @click="dialogClose">返回</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "orderDialog",
  props: {
    dialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "详情",
    },
    table1: Array,
    table2: Array,
  },
  data() {
    return {
      // dialog: '',
      currentTable1:[],
      currentTable2:[],
      table2:[],
      table1: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    };
  },
  methods: {
    dialogClose() {
      // 子组件中不能直接改变props中的值
      this.$emit("update:dialog", false);
    },
    changePage(val) {
      this.page = val;
      this.$emit("changeDetailsPage", val);
    },
    handleSelectionChange1(val){
      this.currentTable1 = val;
    },
    handleSelectionChange2(val){
      this.currentTable2 = val;
    },
    toRight(){
      this.currentTable1.forEach(item => {
        this.table2.push(item)
      })
      for(let i=0; i<this.table2.length; i++){
        for(let j=0; j<this.table1.length; j++){
          if(this.table2[i].date == this.table1[j].date){
            this.table1.splice(j,1);
          }
        }
      }
      this.currentTable1 = [];
    },
    toLeft() {
      this.currentTable2.forEach(item => {
        this.table1.push(item);
      })
      for(let i=0; i<this.table1.length; i++){
        for(let j=0; j<this.table2.length; j++){
          if(this.table1[i].date == this.table2[j].date){
            this.table2.splice(j,1);
          }
        }
      }
      this.currentTable2 = [];
    }
  },
};
</script>

<style lang="scss">
.el-pagination {
  position: absolute;
  right: 1%;
}
.el-dialog__body{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .el-table{
    margin:0 10px;
  }
  .btns{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .el-button{
      margin:10px 0;
    }
  }
}

</style>