使用element-ui实现树形穿梭框

<template>
  <div class="transferTreeBox">
    <!-- 左侧待选内容 -->
    <div class="SelectBox">
      <div class="boxTitle" @click="clickAllSelect">全选 &gt;</div>
      <div class="boxCenter">
        <el-tree
          ref="leftTree"
          :data="leftData"
          :props="defaultProps"
          show-checkbox
          node-key="id"
        />
      </div>
    </div>

    <!-- 中间穿梭按钮 -->
    <div class="transferBtn">
      <div class="pickBtn" @click="towardsRight">&gt;&gt;</div>
      <div class="pickBtn" @click="towardsLeft">&lt;&lt;</div>
      <el-button @click="renderTree">数据回显</el-button>
    </div>

    <!-- 右侧已选内容 -->
    <div class="SelectBox">
      <div class="boxTitle" @click="clickCancelAllSelect">&lt; 取消全选</div>

      <div class="boxCenter">
        <el-tree
          ref="rightTree"
          :data="rightData"
          :props="defaultProps"
          show-checkbox
          node-key="id"
        />
      </div>
    </div>
  </div>
</template>

<script>
const mockTreeData = [
  {
    id: '1',
    label: '1',
    children: [
      {
        id: '1-1',
        label: '1-1',
        pid: '1',
      },
      {
        id: '1-2',
        label: '1-2',
        pid: '1',
      },
      {
        id: '1-3',
        label: '1-3',
        pid: '1',
      },
    ],
  },
  {
    id: '2',
    label: '2',
    children: [
      {
        id: '2-1',
        label: '2-1',
        pid: '2',
      },
      {
        id: '2-2',
        label: '2-2',
        pid: '2',
      },
      {
        id: '2-3',
        label: '2-3',
        pid: '2',
      },
    ],
  },
  {
    id: '3',
    label: '3',
    children: [
      {
        id: '3-1',
        label: '3-1',
        pid: '3',
      },
      {
        id: '3-2',
        label: '3-2',
        pid: '3',
      },
      {
        id: '3-3',
        label: '3-3',
        pid: '3',
      },
    ],
  },
]
export default {
  props: {
    cascaderData: {
      type: Array,
      default: () => mockTreeData,
    },
  }, // 班级的树形结构数据
  layout: 'login',
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      leftData: [],
      rightData: [],
    }
  },
  mounted() {
    this.leftData = mockTreeData
    this.rightData = []
  },
  methods: {
    // 点击向右穿梭
    towardsRight() {
      // (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，
      // 1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
      const checkedNodes = this.$refs.leftTree.getCheckedNodes(false, true) // 包含半选
      const checkedKeys = this.$refs.leftTree.getCheckedKeys(false)

      const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
      copyNodes.forEach(x => {
        x.children = []
        if (!this.$refs.rightTree.getNode(x.id)) {
          this.$refs.rightTree.append(x, x.pid)
        }
      })

      checkedKeys.forEach(x => {
        this.$refs.leftTree.remove(x)
      })
      this.afterToward()
    },
    // 点击向左穿梭
    towardsLeft() {
      const checkedNodes = this.$refs.rightTree.getCheckedNodes(false, true) // 包含半选
      const checkedKeys = this.$refs.rightTree.getCheckedKeys(false)

      const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
      copyNodes.forEach(x => {
        x.children = []
        if (!this.$refs.leftTree.getNode(x.id)) {
          this.$refs.leftTree.append(x, x.pid)
        }
      })

      checkedKeys.forEach(x => {
        this.$refs.rightTree.remove(x)
      })

      this.afterToward()
    },
    // 点击全选
    clickAllSelect() {
      this.$refs.leftTree.setCheckedNodes(this.leftData)

      this.towardsRight()
    },
    // 点击取消全选
    clickCancelAllSelect() {
      this.$refs.rightTree.setCheckedNodes(this.rightData)
      this.towardsLeft()
    },
    // 数据穿梭后
    afterToward() {
      this.$refs.leftTree.setCheckedKeys([])
      this.$refs.rightTree.setCheckedKeys([])
      console.log(this.leftData, this.rightData)
      this.$emit('getData', {
        leftData: this.leftData,
        rightData: this.rightData,
      })
    },
    // 数据回显
    renderTree() {
      this.leftData = [mockTreeData[1]]
      this.rightData = [mockTreeData[0], mockTreeData[2]]
    },
  },
}
</script>
<style lang="less" scoped>
.transferTreeBox {
  display: flex;
  width: 590px;
  justify-content: space-around;

  .SelectBox {
    border: 1px solid #ccc;
    height: 270px;
    width: 200px;
    color: #fff;
    position: relative;

    .boxTitle {
      background: #a0cfff;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }

    .boxCenter {
      height: 100%;
      width: 100%;
      max-height: 239px;
      overflow-y: scroll;
    }
  }

  .transferBtn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .pickBtn {
      height: 30px;
      width: 50px;
      background: #a0cfff;
      color: #fff;
      font-weight: 700;
      font-size: 20px;
      border-radius: 5px;
      margin-top: 10px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }
  }
}
</style>