If there is a parent ID in the elementUI el-tree initialization array, all child nodes will be associated.
the background returns the array [46 codeshelper id=0 64 codeshelper id=0 79], but outputs this to el-tree, because there is a parent node ID (46) in the array, so all child nodes under the parent node are checked
.
you can solve the initialization check problem by setting check-strictly, but if you pass it to the background, you need the ID, of the parent of the selected child node.
this is how I get the selected parent and child node ID
this.$refs.tree.getHalfCheckedKeys(), this.$refs.tree.getCheckedKeys()
thought of a way, but it is not the best way to deal with it as follows:
by recursively traversing all the child nodes, and then according to the id match of the selected node passed by the background, judge that the traversal node id is compared with the id selected in the background. If the comparison is true, the setChecked operation will be performed
1. In the created event of the page life cycle, execute the traversal method of the root node of the menu tree
.
created() {
this.foreachMenuRoot()
},
2. Traversal has two pits
2.1.When the page is initialized, the this.$refs.tree or undefined is not defined
2.2.When the created loads the page elements, the this.$refs.tree.children menu tree is not yet loaded, so the undefined is also undefined (there will be a certain delay in the ps: request backend data, and there will be a certain delay in the data loading process of the tree)
foreachMenuRoot() {
//
const _this = this
// createdthis.$refs.tree
if (this.$refs.tree !== undefined && this.$refs.tree.children !== undefined && this.$refs.tree.children !== null) {
this.$refs.tree.children.forEach(function(node) {
if (_this.form.menuIds.indexOf(node.id) !== -1) {
_this.$refs.tree.setChecked(node.id, true, false)
}
if (node.children !== undefined && node.children !== null && node.children.length > 0) {
_this.whileMenuIdsCheckedElTree(node)
}
})
this.formLoading = false
} else {
//
setTimeout(() => {
_this.foreachMenuRoot()
}, 3000)
}
},
3. Recursively traverse the leaf node of the root node
whileMenuIdsCheckedElTree(node) {
const _this = this
node.children.forEach(function(cnode) {
if (_this.form.menuIds.indexOf(cnode.id) !== -1) {
_this.$refs.tree.setChecked(cnode.id, true, false)
}
if (cnode.children !== undefined && cnode.children !== null && cnode.children.length > 0) {
_this.whileMenuIdsCheckedElTree(cnode)
}
})
}
I am not a professional front-end engineer, but I have always been a back-end developer. If you have better ideas and ideas, you are welcome to discuss them
.
