今天接到一个需求,后端需要接收子父级结构的参数,苦思冥想之后最终使用以下方法实现了

第一步:

<el-tree
   :data="treeData"
   show-checkbox
   default-expand-all
   node-key="id"
   ref="tree"
   highlight-current
   :props="defaultProps">
</el-tree>

第二步:

export default {
    data () {
        return {
            treeData: [
                {
                    id: 1, label: 'ALL',
                    children: [
                        { 
                            id: 2, type: 'pid', label: 'Total Equipment Cost',
                            children: [
                                {id: 8, pid: 2, type: 'child', label: 'Total Price'},
                                {id: 9, pid: 2, type: 'child', label: '占比'},
                            ]
                        },
                        { 
                            id: 3, type: 'pid', label: 'Processing Cost Breakd',
                            children: [
                                {id: 10, pid: 3, type: 'child', label: 'Total Hours'},
                                {id: 11, pid: 3, type: 'child', label: 'Total Cost'},
                            ]
                        },
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            checkboxData: [], // 已选择的数据
        }
    }
}

第三步:

methods: {
    Results(){
        let data = this.$refs.tree.getCheckedNodes() // 获取选择的数据
        let pidList = []; // 存储pid集合
        let childList = []; // 存储子数据集合
        // 循环已选择的数组,将pid和子数据进行分组
        data.map((item) => {
           if(item.type === 'child'){
              pidList.push(item.pid)
              childList.push(item)
           }else{
              pidList.push(item.id)
           }
        })
        pidList = [...new Set(pidList)] // 去重后的父id
        // 获取父级数据
        let parentObj = []; // 存储获取到的父级数据
        pidList.map((itm) => {
           this.treeData[0].children.map((item) => {
              if(itm === item.id){
                  let params = {}
                  params.id = item.id;
                  params.label = item.label;
                  params.type = item.type;
                  params.children = [];
                  parentObj.push(params)
              }
            })
        })
        // console.log(childList,'子数组集合');
        // 遍历父数据集合,用子数据的pid和父级数据对象的id进行匹配,将匹配到的子数据存放到对应的父对象中
        parentObj.map((item) => {
            childList.map((itm) => {
               if(item.id === itm.pid){
                   item.children.push(itm)
               }
             })
        })
        console.log(parentObj); // 最终结果
    }
}

至此完成,感谢支持!!!

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐