自己写一个transfer穿梭框

需求类似穿梭框，但是左边移到右边后，左边数据只是禁掉，但还是保留。左边数据通过接口获取，后端分页。但是里面要是table显示多个字段。看了下插件穿梭框没有完全符合的，准备用ant-desgin-vue，结果公司原项目是vue2，要用只能用ant-desgin1版本，1版本又有些莫名其妙的bug，还要改他们的代码，太麻烦了，直接自己写了个，虽然写的很low，但是功能实现了，代码还可以优化。
效果图：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/05871b87a55e4bb6b5afd264a1fba5e8.jpeg#pic_center)

  <div class="myTranfer">
            <div class="table1">
             <div class="body">
                <div class="search">
                  <el-input placeholder="输入名称或者邮箱搜索" clearable v-model="formConfig.searchInfo"  class="input-with-select">
                    <el-button slot="append"  icon="el-icon-search"  @click="getLeftData"></el-button>
                  </el-input>
                </div>
                <div class="tablePadding">
                  <el-table
                    ref="multipleTable"
                    class="minHeight"
                    :data="deviceData"
                    v-loading="searchLoading"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      :selectable="checkboxSelect"
                      width="55">
                    </el-table-column>
                    <!-- 其他列 -->
                    <el-table-column
                      label="用户名"
                      prop="username"
                      width="120" />
                    <el-table-column
                      prop="nickName"
                      label="昵称"
                      width="120" />
                    <el-table-column prop="gender" label="性别" />
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="phone"
                      width="100"
                      label="电话"
                    />
                  </el-table>
                  <!--分页组件-->
                  <el-pagination
                    class="myPagination"
                    @size-change="handleSizeChangeDivece"
                    @current-change="handleCurrentChangeDivece"
                    :current-page="pageDivece.page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageDivece.size"
                    layout="total, sizes, prev, pager, next, jumper, ->"
                    :total="pageDivece.total"
                  ></el-pagination>
                </div>
              </div>
            </div>
            <div class="center">
              <el-button size="mini" plain type="primary"  icon="el-icon-arrow-right" @click="moveToRight"></el-button>
              <el-button size="mini"  plain type="primary"  icon="el-icon-arrow-left" @click="moveToLeft"></el-button>
            </div>
            <div class="table1">
              <div class="body">
                <div class="search">
                  <h4 class="h4">角色关联的用户</h4>
                </div>
                <div class="tablePadding">
                  <el-table
                    ref="multipleTableRight"
                    :data="deviceDataRight"
                    class="minHeight"
                    tooltip-effect="dark"
                    height="50"
                    :selection.sync="selectedRows"
                    style="width: 100%"
                    @selection-change="handleSelectionChangeRight">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <!-- 其他列 -->
                    <el-table-column
                      label="用户名"
                      prop="username"
                      width="120" />
                    <el-table-column
                      prop="nickName"
                      label="昵称"
                      width="120" />
                    <el-table-column prop="gender" label="性别" />
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="phone"
                      width="100"
                      label="电话"
                    />
                  </el-table>
                </div>
              </div>
            </div>
          </div>

data() {
    return {
      deviceData:[],
      deviceDataLength:null,
      pageDivece:{
        page:1,
        size:10,
        total:0
      },
      searchLoading:false,
      formConfig:{
        searchInfo:null
      },
      deviceData: [ ],
      deviceDataRight: [],
      selectedRightRows:[],
      selectedRows: [],
      selectQueryUserByRoleInfo:{},
      submitUserRoleLoading:false
    }
  },
//穿梭框
    // // 左边修改每页条数
    handleSizeChangeDivece(val) {
      this.pageDivece.size = val
      this.pageDivece.page =0
      this.getLeftData()
    },
    // // 左边跳转哪一页
    handleCurrentChangeDivece(val) {
      this.pageDivece.page = val
      this.getLeftData()
    },
    getLeftData(){
        let datas={
          page: this.pageDivece.page-1,
          size:this.pageDivece.size,
          blurry:this.formConfig.searchInfo
        }
      this.searchLoading=true
        crudUser.get(datas).then(res=>{
          this.searchLoading=false
          this.deviceData=res.content
          console.log(this.deviceData)
          if (res.content && res.content.length > 0) {
            // 数据变化时从左边找到 右边选中的数据并禁掉
            this.setCheckedOnLoad()
          }
          this.pageDivece.total=res.totalElements
        }).catch(()=>{
          this.searchLoading=false
        })
    },
    setCheckedOnLoad() {
      // 遍历左边表格数据
      this.deviceData.forEach(row => {
        // 检查是否在右边表格中存在
        const found = this.deviceDataRight.some(item => item.id === row.id);
        if (found) {
          // this.selectedRows.push(row)
          this.$nextTick(() => {
            // 如果存在，设置选择状态为选中
            this.$refs.multipleTable.toggleRowSelection(row, true);
          })
        }
      });
      console.log(this.selectedRows)
    },
    // 左边表格选中状态变化处理
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    // 将左边选中的数据移到右边
    moveToRight() {
      this.selectedRows.forEach(row => {
        // 检查右边表格是否已存在相同id的数据
        if (!this.deviceDataRight.some(item => item.id === row.id)) {
          this.deviceDataRight.push(row);
          this.$refs.multipleTable.toggleRowSelection(row, true)
        }
      });
      // 清空选中的数据
      this.selectedRows = [];
    },
    // 左边表格的选择框是否可选
    checkboxSelect(row) {
      // 只有当该行数据不在右边表格中时才允许选择
      return !this.deviceDataRight.some(item => item.id === row.id);
    },
    // 从右边表格移除选中的数据
    moveToLeft() {
      this.selectedRightRows.forEach(row => {
        const index = this.deviceDataRight.findIndex(item => item.id === row.id);
        if (index !== -1) {
          this.$nextTick(() => {
            // this.$refs.multipleTable.toggleRowSelection(row, false); // 取消选中状态
            this.deviceDataRight.splice(index, 1); // 移除数据
            this.selectedRows = []; // 清空选中数据
          });
        }
        this.$refs.multipleTable.selection.forEach((item,i)=>{
          if(item.id==row.id){
            this.$refs.multipleTable.toggleRowSelection(item);
          }
        })
      });
      this.selectedRightRows = []; // 清空右侧选中数据
    },

    // 右边表格选中状态变化处理
    handleSelectionChangeRight(selection) {
      this.selectedRightRows = selection;
    },

.myTranfer{
  display: flex;
  justify-content: space-between;
  .table1{
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    width: 525px;
    ::v-deep .el-checkbox__inner{
      border: 1px solid #409eff;
    }
    ::v-deep span.el-checkbox__input.is-disabled{
      .el-checkbox__inner{
        border: 1px solid #dcdfe6;
      }
    }
    .header{
      //width: 100%;
      //padding: 7.4995px 12px 8.4995px;
      //color: #000000d9;
      //background: #fff;
      //border-bottom: 1px solid #f0f0f0;
      //border-radius: 2px 2px 0 0;
    }
    .body{
      //position: relative;
      //height: 100%;
      font-size: 14px;
      //padding-top: 56px;
      .search{
        //position: absolute;
        //top: 0;
        //left: 0;
        width: 100%;
        padding: 10px 15px;
        ::v-deep input.el-input__inner{
          width: 100% !important;
        }
      }
      .tablePadding{
        padding: 5px;
      }

    }

  }
  .center{
    padding: 0 10px;
    margin-top: 230px;
    //display: inline-grid;
    width: 45px;
    button{
      height: 28px;
      margin-top: 10px;
      padding: 0 8px;
    }
  }
}
::v-deep .myPagination{
  .el-input__inner{
    width: inherit;
  }
}
.minHeight{
  min-height: 451px;
}
.h4{
  line-height: 28px;
  padding-left: 8px;
  height: 32px;
  margin-bottom: 0;
  border-bottom: 1px solid #dfe6ec;
  color: rgba(0, 0, 0, 0.7);
}