vue-element-穿梭框表格el-transfer

左边表格是调后台接口所得到的，不调接口可以自己写点数据的哈，在实现穿梭框的同时又自己写了删除列表功能（弹出框哦），可删除可恢复。下面是HTML代码

<template>
  <section>
 <!--工具条-->
    <el-row>
      <el-col :span="18" style="padding-bottom: 0px;margin-left:4%;">
        <el-form style="display:flex;align-items: center;">
          <el-form-item style="font-weight: bold;margin-bottom:0" label="搜索列表"></el-form-item>
          <el-form-item style="margin-left:30%;margin-bottom:0">
            <el-button @click="addStaff" type="primary" :disabled="!staffData.length">批量加入</el-button>
          </el-form-item>
          <el-form-item style="margin-left:1%;margin-bottom:0">
            <el-button @click="handleToDelList">删除列表</el-button>
          </el-form-item>
          <el-form-item style="font-weight: bold;margin-left:7%;margin-bottom:0" label="已选列表"></el-form-item>
          <el-form-item style="margin-bottom:0">
            <el-button
              @click="removeStaff"
              type="primary"
              :disabled="!selectedStaffData.length"
            >批量取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div style="text-align: center;margin-left: 2%;">
      <el-row :gutter="20">
        <el-col :span="11">
          <el-table
            ref="staffTable"
            height="350"
            v-loading="listLoading"
            :row-key="getRowKeys"
            :data="staffList"
            border
            fit
            highlight-current-row
            @selection-change="handleStaffChange"
          >
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>

            <el-table-column label="歌名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.musicTitle?row.musicTitle:'暂无' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.musicName ?row.musicName:'暂无'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
              <template slot-scope="scope">
                <el-button
                  style="margin-bottom: 4px;"
                  size="small"
                  type="primary"
                  @click="handleDel(scope.$index, scope.row)"
                >删除</el-button>
                <el-button
                  style="margin-bottom: 4px;"
                  size="small"
                  type="primary"
                  @click="handleDel(scope.$index, scope.row)"
                >试听</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="11">
          <el-table
            ref="selectedStaffTable"
            height="350"
            v-loading="listLoading"
            :row-key="getRowKeys2"
            :data="selectedStaffList"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectedStaffChange"
          >
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>

            <el-table-column label="歌名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.musicTitle?row.musicTitle:'暂无' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.musicName?row.musicName:'暂无' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- <el-button
                  style="margin-bottom: 4px;"
                  size="small"
                  type="primary"
                  @click="handleDel(scope.$index, scope.row)"
                >取消</el-button>-->
                <el-button
                  style="margin-bottom: 4px;"
                  size="small"
                  type="primary"
                  @click="handleDel(scope.$index, scope.row)"
                >编辑标签</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

    <div style="text-align:center;margin:20px 0">
      <el-button type="primary" @click="submitForm('siteForm')">确定</el-button>
    </div>
    <!--删除列表-->
    <el-dialog title="删除列表" :visible.sync="delFormVisible" :close-on-click-modal="false">
      <!--列表-->
      <el-table
        border
        :data="delList"
        highlight-current-row
        v-loading="listLoading"
        style="width: 100%;"
      >
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="歌名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.musicTitle?row.musicTitle:'暂无' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.musicName?row.musicName:'暂无' }}</span>
              </template>
            </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              style="margin-bottom: 4px;"
              size="small"
              type="primary"
              @click="handleRecover(scope.$index, scope.row)"
            >恢复</el-button>
            <el-button
              style="margin-bottom: 4px;"
              size="small"
              type="primary"
              @click="handleSigning(scope.$index, scope.row)"
            >编辑标签</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
      </section>
</template>

data数据

 data() {
    return {
      delFormVisible:false,//删除列表
      delList:[], 
      lists: JSON.parse(sessionStorage.getItem("lists"))
        ? JSON.parse(sessionStorage.getItem("lists"))
        : [],//这里是我因为新增的需要自己手动写，所以存在了本地，在另一个页面使用
      tradesList: [],
      tradeSonList: [],
      labelTypeList: [],
      secLabelList: [],
      ids: [],
      staffTemp: {},
      staffList: [],//左边表格
      selectedStaffList: [],//右边表格
      staffData: [],
      selectedStaffData: [],
      tableKey: 0,
      rowKey: "rowKey",
      listLoading: false,
      searchDate1: [-1, -1],
      remitDate: "",
      radioMusic: 1,
      remark: "",
      updateMusic: "",
      selectName: true,
      changeSecName: 0,
      pattern: 0,
      aisle: 0,
      siteForm: {
        itemModel: 0,
        types: 0
      },
      sels: [],
         };
  },

下面是逻辑代码

  methods: {
  //我看到elementUI上说这个是必须的，好像是这样的，不写就会报错，说RowKey有问题。。
    getRowKeys(row) {
      // 行数据的Key
      return row.id;
    },
    getRowKeys2(row) {
      // 行数据的Key
      return row.id;
    },
     // 获取搜索列表（左边表格数据）
    getList() {
      let para = {
        title: this.title,
        labelIdList: this.secLabelList,
        pageNo: 1,
        pageSize: this.pageSize
      };
      musicBeforeEditApi(para).then(res => {
        if (res.data.result == 0) {
          this.staffList = res.data.data.list;
          this.delList=[]
          // console.log(res.data);
        } else {
          Message.error(res.data.msg);
        }
      });
    },
    // 将左边表格选择项存入staffData中
    handleStaffChange(rows) {
      this.staffData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.staffData.push(row);
          }
        });
      }
    },
    // 左边表格选择项移到右边
    addStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      let repeat = false;
      this.selectedStaffList.forEach(item => {
        if (
          this.staffData[0] &&
          item.musicUuid === this.staffData[0].musicUuid
        ) {
          repeat = true;
          Message.error("此音乐已添加");
          return;
        }
      });
      if (repeat === false) {
        this.staffData.forEach(item => {
          this.selectedStaffList.push(item);
        });
        for (let i = 0; i < this.staffList.length; i++) {
          for (let j = 0; j < this.staffData.length; j++) {
            if (
              this.staffList[i] &&
              this.staffData[j] &&
              this.staffList[i].musicUuid === this.staffData[j].musicUuid
            ) {
              this.staffList.splice(i, 1);
            }
          }
        }
      }
    },
    // 右边表格选择项移到左边
    removeStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      this.selectedStaffData.forEach(item => {
        this.staffList.push(item);
      });
      for (let i = 0; i < this.selectedStaffList.length; i++) {
        for (let j = 0; j < this.selectedStaffData.length; j++) {
          if (
            this.selectedStaffList[i] &&
            this.selectedStaffData[j] &&
            this.selectedStaffList[i].phone === this.selectedStaffData[j].phone
          ) {
            this.selectedStaffList.splice(i, 1);
          }
        }
      }
    },
    // 将右边表格选择项存入selectedStaffData中
    handleSelectedStaffChange(rows) {
      this.selectedStaffData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.selectedStaffData.push(row);
          }
        });
      }
    },
    // 提交（没有写提交功能，可不用）
    modifyStaff() {
      let isEmpty = false;
      this.selectedStaffList.forEach(item => {
        if (!item.staffTypeId) {
          alert("请选择类型");
          isEmpty = true;
          return;
        }
      });
      if (isEmpty === false) {
        editStaff(this.selectedStaffList, this.deviceQuery.id).then(res => {
          this.staffListVisible = false;
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
            duration: 2000
          });
        });
      }
    },
    // 删除列表
    handleToDelList() {
      this.delFormVisible=true
    },
    // 删除
    handleDel(index,row){
      this.delList.push(row)
      this.staffList.splice(index,1)
      // console.log(this.delList,this.staffList)
    },
    // 恢复
    handleRecover(index,row){
      this.staffList.push(row)
      this.delList.splice(index,1)
    },
    }

下面是效果啦，要选中才能批量加入或取消哦