Property check-strictly: Whether to strictly follow the practice of disassociating children from each other when checkboxes are displayed. The default is false.

Functions achieved:

Click the root (parent) node and check all the children below. 2. Click the parent node of the child node and check the parent node (nested multi-level parent nodes automatically recursively search up) 3. 4. If nested multi-level parent nodes are recursively searched up by default until all sibling child nodes under the parent node are not fully unchecked.Copy the code

Note: 1. Do not modify the parent in the method

2, parentId and children according to your own parameters

The method is at the bottom and you can go straight to the bottom

To get the final selected id value this. $refs. Tree. GetCheckedKeys (). The concat (this. $refs. Tree. GetHalfCheckedKeys () returns an arrayCopy the code
<template>
    <div>
        <el-tree ref="tree"
                 :data="treeMenus"
                 :props="multiProps"
                 :show-checkbox="true"
                 node-key="id"
                 highlight-current
                 :expand-on-click-node="true"
                 :default-checked-keys="checkedId"
                 :check-strictly="true"
                 @check="clickDeal">
        </el-tree>
    </div>
</template>
Copy the code
Return {checkedId: [], treeMenus: [{id: 1, parentId: -1, label: 'level1 ', children: [{id: 4, parent: 1, label:' level1 ', children: [{id: 4, parent: 1, label: 'level1 ', children: [{id: 4, parent: 1, label:' level1 ', children: [{id: 4, parent: 1, label: Children: [{id: 9, parentId: 4, label: '1-1-1', children: [{id: 1000, parentId: 9, label:' 1-1-1', children: [{id: 1000, parentId: 9, label: '1-1-1'] '1000-1-1', children: []}, {id: 1001, parentId: 9, label:' 1000-1-1', children: []}, {id: 1001, parentId: 9, label: '1001-1-1', children: [{id: 2000, parentId: 1001, label: 'grade 2000-1-1', children: []},{ID: 2001, parentId: 1001, Label:' Grade 2000-1-1', children: ]}] []}}, {id: 10, parentId: 4, label: 'level 3' 1-1-2, children: []}}, {id: 20, parentId: 1, the label: '123', the children: []}, {id: 25, parentId: 1, label: '12456', children: []}]}, {parentId: -1, id: 2, label: '1 ', children: [], {parentId: 2, id: 5, label: '2', children: []}, {parentId: 2, id: 6, label:' 2', children: []}, {parentId: -1, id: 3, label: '3', children: []}, {parentId: 3, id: 7, label:' 3', children: []}, {parentId: 3, id: 8, label: '2', children: []}], multiProps: {children: 'children', label: 'label'}}Copy the code
methods: { clickDeal(currentObj, treeStatus){ this.clickCheck(currentObj, treeStatus,this.$refs.tree) }, /** * Tree menu check box the parent node is not associated with the parent node to achieve linkage between the parent node ** @see selectedParent - Handle the parent node as selected * @see uniteChildSame - Handle the child node as the same check state * @see RemoveParent - Uncheck parent status * * @param {Object} currentObj - Current selected node Object * @param {Object} treeStatus - Current selected node Object * @param {Object} ref - this.$refs. XXX **/ clickCheck(currentObj, treeStatus, ref) { When the parent node is not strictly associated with the parent node, the parent node notifies the child node to synchronize the change when the parent node selects the change, realizing one-way association. let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // select * if (selected! == -1) {this.selectedparent (currentObj, ref); This.unitechildsame (currentObj, true, ref); } else {// Remove the selected child trigger if (currentobj.parentid! == -1) { this.removeParent(currentObj, ref); } / / not handling all child nodes selected not selected the if (currentObj. Children. Length! == 0) { this.uniteChildSame(currentObj, false, ref); }}, /** / uniteChildSame(treeList, isSelected, ref) {let treeListData = treelist.children; let len = treeListData.length; ref.setChecked(treeList.id, isSelected); for (let i = 0; i < len; i++) { this.uniteChildSame(treeListData[i], isSelected, ref); SelectedParent (currentObj, ref) {let currentNode = ref.getNode(currentObj); if (currentNode.parent.key ! == undefined) { ref.setChecked(currentNode.parent, true); return this.selectedParent(currentNode.parent, ref); }}, / removeParent(currentObj, ref) {let a = 0; let b = 0; let currentNode = ref.getNode(currentObj); if (currentNode.parent ! == null) { if (currentNode.parent.key ! == undefined) { ref.setChecked(currentNode.parent, true); This.removeparent (currentNode.parent, ref); / / recursive judgment child nodes}} / / not to 0 is expressed as the parent node if (currentNode..childnodes. Length! For (let I = 0; i < currentNode.childNodes.length; I ++) {if (currentNode.childNodes[I].checked === false) {++a; / / a = = = currentNode..childnodes. Length showed that all child nodes to false if (a = = = currentNode..childnodes. Length) {/ / is undefined skip, and is not equal to continue if (currentNode.childNodes[i].parent.key ! == undefined) { ref.setChecked(currentNode.childNodes[i].parent, false); // Loop the child under the parent for (let I = 0; i < currentNode.parent.childNodes.length; I++) {/ / to determine whether a child node under the parent node is false if all (currentNode. Parent..childnodes [I] checked = = = false) {+ + b; / / b = = = currentNode. Parent..childnodes. Length showed that all child nodes to false if (b = = = currentNode. Parent..childnodes. Length) { ref.setChecked(currentNode.parent.key, false); Return this.removeparent (currentNode.parent, ref); // continue recursive loop judgment}}}}}}}}},}Copy the code

This code changes since: blog.csdn.net/Beam007/art…