穿梭框elementui-VUE+ElementUI 实现一侧为树形结构，右侧无层次结构的穿梭盒

工作中遇到一个需求，需要将数据选择放入穿梭盒中，要求穿梭盒右侧为树形结构穿梭框elementui，右侧为显示数据，无层次结构。 ElementUI本身很难给穿梭盒添加树形结构。 在网上找到了大佬们封装的插件，对两边的无树结构还是不满意，所以基于ElementUI和VUE2.X做了一个小组件。 优化的地方很多穿梭框elementui，基本可以满足业务需求。 ，旁边有时间的话我会尽量做到灵活一些。 我是一个菜鸟程序员，当我听到什么可以优化的时候，掠食者希望原谅我。

功效图：

组件代码：

    
    

        
        

            
            <el-tree
                ref="treeLeft"
                :data="dataLeft"
                show-checkBox
                node-key="id"
                :props="defaultProps">
            
        
        
        

            
            
        
        
        

            
            
            <el-tree
                ref="treeRight"
                :data="dataRight"
                show-checkBox
                node-key="id"
                :props="defaultProps">
            
        
    


    export default{
        props:['datas','defaultProps'],
        data(){
            return{
                yuansiData:[],
                dataLeft:[],
                dataRight:[]
            }
        },
        mounted() {this.dataLeft = this.datas
            this.yuansiData = JSON.parse(JSON.stringify(this.datas))
        },
        methods:{
            add(){
                // 定义一个递归过滤的方法，用来删掉父级中给的元素
                // 获取所有选中的项并且去掉父级
                let list = this.$refs.treeLeft.getCheckednodes()
                // 走原始数据中删掉已经选择的
                // 1.父级的删除
                const parList = list.filter(item=>{
                    return item.parameterInfoList
                })
                for(let item1 of parList){
                    let index = this.dataLeft.findindex(item2=>{
                        return item2.id == item1.id
                    })
                    if(index>=0){
                        this.dataLeft.splice(index,1)
                    }
                }
                // 2.子级的删除
                list = list.filter((item=>{
                    return !item.parameterInfoList
                }))
                // 这里做了三重循环，如果有可能需要对其进行优化
                for(let item of list){
                    for(let ind in this.dataLeft){
                        if(this.dataLeft[ind].parameterInfoList.length){
                            let index = this.dataLeft[ind].parameterInfoList.findindex(item2=>{
                                return item2.id == item.id
                            })
                            if(index>=0){
                                this.dataLeft[ind].parameterInfoList.splice(index,1)
                            }
                        }
                    }
                }
                this.$refs.treeLeft.setCheckednodes([])
                // 将选择的项添加到右侧
                this.dataRight.push(...list)
            },
            remove(){
                // 从右侧移除时的方法
                // 1.从右侧删除选中的数据
                let list = this.$refs.treeRight.getCheckednodes()
                for(let item of list){
                    let index = this.dataRight.findindex(item2=>{
                        return item.id == item2.id
                    })
                    if(index>=0){
                        this.dataRight.splice(index,1)
                    }
                }
                // 2.把右侧删除的数据添加给左侧,但是要注意父级的问题
                this.dataLeft = JSON.parse(JSON.stringify(this.yuansiData))
                for(let index in this.dataLeft){
                    // 如果有子级去删除子级
                    for(let item of this.dataRight){
                        let ind = this.dataLeft[index].parameterInfoList.findindex(item2=>{
                            return item2.id == item.id
                        })
                        if(ind>=0){
                            this.dataLeft[index].parameterInfoList.splice(ind,1)
                        }
                    }
                    this.dataLeft = this.dataLeft.filter(item2=>{
                        return item2.parameterInfoList.length!=0
                    })
                }
            },
            getResult(){
                return this.dataRight
            }
        }
    }

<style scoped lang="less">
    .tree-transfer{
        display: flex;
        min-height: 250px;
        .tree-transfer-left{
            min-width: 200px;
            border:1px #E5E5E5 solid;
            border-radius: 10px;
            padding: 10px;
        }
        .tree-transfer-middle{
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 120px;
        }
        .tree-transfer-right{
            min-width: 200px;
            border:1px #E5E5E5 solid;
            border-radius: 10px;
            padding: 10px;
        }
    }

父组件需要传递具有层次结构的数据，以及 ElementUI 中的树属性。

这里使用的数据中的唯一标识符是id，子元素放置在parameterInfoList数组中。

默认属性：{

子项：'参数信息列表'，

标签：'名字'

父组件中的参考表单：

学到的小方法：如果想让ElementUI中不缓存对话框中的内容，只需要在其外面包裹一个div，并添加v-if属性即可。 该值与控制对话框的显示和隐藏的值相同。

注意：后续使用需要根据自己的数据数组名称替换parameterInfoList