Z-Tree数据结构转Element UI el-Tree数据结构处理,包括回显

1.el-tree

                
                            
                            
                

2.JS

 iniTree(queryParam) {
                //初始化树,iniTree是你自己写好的axios方法,这边只是举例,本文没有这个方法
                let url = ctx + "system/menu/roleMenuTreeData";
                if (this.title == '编辑'){
                    url += "?roleId="+this.form.roleId
                }
                axios.get(url).then(data => {
                    //数据转换
                    let tree = this.listToTree(data.data);
                    //删除children为空的参数
                    this.diGuiTree(tree);
                    this.options = tree;
                    console.log(tree)
                    this.loadingDone = false
                });
            },
            listToTree(data, options) { //{id,pId,name}转成{id,label,children}类型
                this.defaultCheckedKeys = []
                if (data && data.length) {
                    options = options || {}
                    let ID_KEY = options.idKey || 'id'
                    let PARENT_KEY = options.parentKey || 'pId'
                    let CHILDREN_KEY = options.childrenKey || 'children'
                    let CHECKED = options.checked || 'checked'
                    let tree = []
                    let childrenOf = {}
                    var item, id, parentId
                    for (var i = 0, length = data.length; i < length; i++) {
                        item = data[i]
                        item.label = data[i].name
                        id = item[ID_KEY]
                        if (item[CHECKED]){
                            this.defaultCheckedKeys.push(id)
                        }
                        parentId = item[PARENT_KEY] || 0
                        // 每行数据都可能存在子类
                        childrenOf[id] = childrenOf[id] || []
                        // 初始化子类
                        item[CHILDREN_KEY] = childrenOf[id]
                        if (parentId != 0) {
                            // 初始化其父的子节点
                            childrenOf[parentId] = childrenOf[parentId] || []
                            // 把它推到父类下的children
                            childrenOf[parentId].push(item)
                        } else {
                            tree.push(item)
                        }
                    }
                    return tree
                } else {
                    return []
                }
            },
            diGuiTree(item) {  //递归便利树结构,删除children为空的参数
                item.forEach(node => {
                    //用于编辑回显
                    if (node.children != [] && node.children.length != 0){
                        node.children.forEach(nodeItem => {
                            if (!nodeItem.checked){
                                node.checked = false
//这个def....什么是你绑定element tree的一个属性
                                this.defaultCheckedKeys = this.defaultCheckedKeys.filter(item => item != node.id)
                            }
                        })
                    }
                    //用于树的遍历
                    if (node.children == [] || node.children.length == 0){
                        delete node.children
                    }else {
                        this.diGuiTree(node.children);
                    }
                });
            }

你可能感兴趣的:(开发语言,javascript)