仿element el-transfer 穿梭框

效果
1.点击左侧列表选中，右侧显示
2.取消左侧列表选中，右侧删除
3.左侧可搜索，全选
4.删除右侧列表，左侧列表取消选中
效果：

父组件

<transfer
    :tableData="deptUserList"
    :labelKey="tableLabel"
    @selectChange="selectChange"
    ref="transferuser"
></transfer>

 //接受子组件的值
 selectChange(val) {
    this.userIdList = [];
    console.log("右侧值", val);
    val.forEach((item) => {
        this.userIdList.push(item.userId);
        console.log(999999, this.userIdList);
      });
 },

 // 取消弹框时清空子组件选中的值
    handleClose() {
    this.$refs.transferuser.currentSelection = [];
    }

子组件

<template>
  <div class="transfer-container">
    <div class="table-transfer">
      <el-row :gutter="24">
        <el-col :span="12" class="left">
          <div class="header">{{ titles[0] }}</div>
          <div class="panel">
            <el-input
              placeholder="请输入内容"
              v-model="inputContent"
              clearable
              @input="handleInputChange"
              @clear="inputClear"
            >
            </el-input>
            <el-table
              ref="tableRef"
              :data="currentTableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <!-- 选中整条数据 -->
              <!-- @row-click="handleRowClick" -->
              <el-table-column prop="username" label="用户名">
              </el-table-column>
              <el-table-column type="selection" width="40"> </el-table-column>
            </el-table>
          </div>
        </el-col>

        <el-col :span="12" class="right">
          <div class="header">{{ titles[1] }}</div>
          <div class="panel">
            <ul>
              <li
                class="item"
                v-for="(item, index) in currentSelection"
                :key="index"
              >
                <span>{{ item.username }}</span>
                <i class="el-icon-close" @click="deleteHandle(item)"></i>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// import specialList from './mock/specialist.json'

export default {
  props: {
    titles: {
      type: Array,
      default: function () {
        return ["", ""];
      },
    },
    tableData: {
      type: Array,
    },
    selectedData: {
      type: Array,
    },
    labelKey: {
      type: Array,
    },
    maxSelect: {
      type: Number,
    },
  },
  model: {
    prop: "selectedData",
    event: "selectChange",
  },
  data() {
    return {
      inputContent: "",
      currentSelection: [],
      currentTableData: [],
      leftSelected: [],
      disabled: true, // 选择按钮默认值
      needSaveCheck: false, // 是否需要保存左侧已选择状态
    };
  },
  watch: {
    //监听左侧数据的更新
    tableData(curVal) {
      if (curVal) {
        this.currentTableData = curVal;
      }
    },
  },
  methods: {
    // 左侧选中数据
    handleSelectionChange(selection) {
      this.currentSelection = selection;
      this.$emit("selectChange", this.currentSelection);
    },
    // 搜索框
    handleInputChange() {
      if (this.inputContent == "") {
        this.inputClear();
        return;
      }
      const filterData = [];
      const leftData = this.tableData.filter(
        (item) =>
          !this.currentSelection.some((citem) => citem.userId == item.userId)
      );
      leftData.map((item) => {
        if (
          item.userId == this.inputContent ||
          item.username.includes(this.inputContent)
        ) {
          // 根据自己的搜索条件来判断
          filterData.push(item);
        }
      });
      this.currentTableData = filterData;
      if (this.leftSelected.length > 0) {
        this.needSaveCheck = true;
      }
    },
    // 清空搜索框
    inputClear() {
      this.currentTableData = this.tableData.filter(
        (item) => !this.currentSelection.some((citem) => citem.no == item.no)
      );
      if (this.leftSelected.length > 0) {
        this.needSaveCheck = true;
        this.handleSelectionChange();
      }
    },
    // 删除右侧数据
    deleteHandle(special) {
      this.currentSelection.splice(
        this.currentSelection.findIndex(
          (item) => item.userId === special.userId
        ),
        1
      );
      // 更改左侧数据是否选中
      this.$refs.tableRef.toggleRowSelection(special, false);
      this.$emit("selectChange", this.currentSelection);
    },
  },
  mounted() {
    console.log(7777777777, this.tableData);
    this.$nextTick(() => {
      this.currentTableData = this.tableData;
    });
  },
};
</script>
<style lang="scss">
.transfer-container div {
  box-sizing: border-box;
}
.transfer-container {
  width: 100%;
  padding: 30px;
  text-align: center;

  .table-transfer {
    min-width: 800px;
    margin: 0 auto;
    .header {
      height: 28px;
      line-height: 28px;
      padding-left: 30px;
      color: darkblue;
      text-align: left;
    }
    .panel {
      width: 100%;
      height: 400px;
      border: 1px solid #eaebee;
      padding: 10px 30px;
      border-radius: 10px;
    }
    .buttons {
      line-height: 300px;
    }
    .left {
      .header {
        border-radius: 0px 20px 0 0px;
      }
      .el-input {
        width: 100%;
        margin: 20px 0;
      }
      .el-input__inner {
        border-radius: 20px;
        height: 30px;
      }
      .el-table__body-wrapper {
        min-height: 200px;
        max-height: 270px;
        overflow: auto;
      }
      .cell {
        padding: 0px;
      }
      td {
        border: none;
      }
      th.is-leaf {
        border: none;
      }
      // th {
      //   .el-checkbox {
      //     display: none;
      //   }
      // }
      .el-table td {
        padding: 5px 0px;
      }
      .el-table {
        border-bottom: none !important;
      }
      .el-table__body-wrapper {
        border-bottom: none !important;
      }
    }
    .right {
      .header {
        border-radius: 20px 0px 0px 0px;
      }
      ul {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-top: 10px;
        li {
          display: flex;
          justify-content: space-between;
          height: 30px;
          line-height: 30px;
        }
        span,
        i {
          display: inline-block;
        }
        .el-icon-close:before {
          line-height: 30px;
        }
      }
    }
  }
}
</style>