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

<template><divclass="transferTreeBox"><!-- 左侧待选内容 --><divclass="SelectBox"><divclass="boxTitle"@click="clickAllSelect">全选 &gt;</div><divclass="boxCenter"><el-treeref="leftTree":data="leftData":props="defaultProps"show-checkboxnode-key="id"/></div></div><!-- 中间穿梭按钮 --><divclass="transferBtn"><divclass="pickBtn"@click="towardsRight">&gt;&gt;</div><divclass="pickBtn"@click="towardsLeft">&lt;&lt;</div><el-button@click="renderTree">数据回显</el-button></div><!-- 右侧已选内容 --><divclass="SelectBox"><divclass="boxTitle"@click="clickCancelAllSelect">&lt; 取消全选</div><divclass="boxCenter"><el-treeref="rightTree":data="rightData":props="defaultProps"show-checkboxnode-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',},],},]exportdefault{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. 是否包含半选节点，默认值为 falseconst 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><stylelang="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>