Element's el-tree multiple-select tree (checkbox) parent-child node association is not associated

Attribute check-strictly

The official document provides the property check-strictly, which determines whether to strictly follow the practice of not associating parent and child items with each other when a check box is displayed. The default value is false.
This property means:
The default value is false, which indicates parent-child relationship. There are the following phenomena and problems:
1. When you set a check node through a function, as long as the parent node is checked, the child node will be checked, even if there is no such child node in the set check list.
2. When you click to check the checkbox, if you click the parent node, all its child nodes will follow the changes of the parent node; if you click the child node, the parent node will be half-selected when the child node is partially checked, the parent node will be selected when all the child nodes are checked, and the parent node will be unchecked when all the child nodes are unchecked.
Set true to strictly follow the parent-child relationship.
1. When you set a check node through a function, whether it is checked is strictly determined by whether there is this node in the checked list.
2. When you click to check a checkbox, no matter which node you click, it will only change the check status of the current node. There is no half-selected state.

System character menu control issues

The problem is that when controlling the system's character menu, the following conditions must be met:
1. When setting a check node through a function, it is necessary to strictly determine whether it is checked by whether there is this node in the checked list, that is, check the parent node but not necessarily all child nodes.
2. When you click to check the checkbox, if you click the parent node, all the child nodes under it will follow the changes of the parent node.
3. When clicking the check box, if you click a child node, the parent node is half-selected when the child node is partially checked, the parent node is selected when all the child nodes are checked, and the parent node is unselected when all the child nodes are unchecked.

Requirements:

1. check-strictly=false does not work

According to the conditions that need to be met, it is obvious that check-strictly is set to false, so starting from the basis of the mutual relationship between check-strictly=false and the parent and child, the problem that needs to be solved is:
Change the parent node corresponding to the child node that has not been fully checked to a half-checked state, but the document search has been fruitless for a long time.
Only getHalfCheckedKeys and getHalfCheckedNodes are not set to half checked.

2. check-strictly=true, try it

You can only try to set check-strictly to true, starting from check-strictly=true to strictly follow the principle that the parent and child are not related to each other. The problem that needs to be solved is:
1. When you click to check the checkbox, if you click the parent node, all the child nodes under it will follow the changes of the parent node.
2. When clicking the check box, if you click a child node, the parent node is half-selected when the child node is partially checked, the parent node is selected when all the child nodes are checked, and the parent node is unselected when all the child nodes are unchecked.
When the parent and child nodes are not strictly related to each other, clicking on the parent and child nodes will not result in a half-selected state, and the half-selected state cannot be set through a function. The solution is to simplify the problem:
1. When you click to check the checkbox, if the status is selected :
1.1. All its parent nodes (parent node, parent node of parent node, and so on) are all uniformly selected following the change of the current node.
1.2. All the child nodes under it will be selected in unison with the parent node.
2. When you click to check the checkbox, if the status is unchecked , all the child nodes under it will follow the parent node and change to unchecked .

Solution code:

1. el-tree tag attributes

<el-tree ref="tree" :data="treeMenus" :props="multiProps" :show-checkbox="true"
 node-key="menuId" highlight-current :expand-on-click-node="false" 
 :default-checked-keys="checkedId" :check-strictly="true" @check="clickDeal">

Node-key: The attribute used as a unique identifier for each tree node. The entire tree should be unique. A key value that uniquely identifies a node.
default-checked-keys = checkedId: corresponds to the default selected ID when the el-tree multi-select tree component is initialized
check-strictly = true: Whether to strictly follow the practice of not having parents and children related to each other
check: The method triggered when the check box is clicked
props: configuration options, see the figure below for details.

According to the backend's response, for :props="multiProps", my configuration is:

multiProps: {
  children: 'childs',
  label: 'name',
  disabled: this.isDisabled
}

The childrens field is identified as the child node and name is the node name. By default, children is identified as the child node and label is the node name.

2. Reassign the multiple-select tree when the el-tree component changes

updated () {
 // Set the default value for the multiple-select tree this.$refs.tree.setCheckedKeys(this.checkedId)
},

checkedId is an array of checked nodes, without distinguishing between parent and child nodes.

3. Special processing when clicking on a check box

clickDeal (currentObj, treeStatus) {
  // Used for: When the parent and child nodes are strictly unrelated, the parent node notifies the child node to change synchronously when the parent node is checked, thus realizing a one-way association.
  let selected = treeStatus.checkedKeys.indexOf(currentObj.menuId) // -1 is not selected // selected if (selected !== -1) {
    // As long as the parent node is selected, the child node is selected this.selectedParent(currentObj)
    // Unify the processing of child nodes to the same check state this.uniteChildSame(currentObj, true)
  } else {
    // Unselected processing: All child nodes are unselected if (currentObj.childs.length !== 0) {
      this.uniteChildSame(currentObj, false)
    }
  }
},
// Unify the processing of child nodes with the same check status uniteChildSame (treeList, isSelected) {
  this.$refs.tree.setChecked(treeList.menuId, isSelected)
  for (let i = 0; i < treeList.childs.length; i++) {
    this.uniteChildSame(treeList.childs[i], isSelected)
  }
},
// Unified processing of parent nodes as selected selectedParent (currentObj) {
  let currentNode = this.$refs.tree.getNode(currentObj)
  if (currentNode.parent.key !== undefined) {
    this.$refs.tree.setChecked(currentNode.parent, true)
    this.selectedParent(currentNode.parent)
  }
},

This is the end of this article about element's el-tree multiple-select tree (checkbox) parent-child node association or non-association. For more related element el-tree multiple-select tree non-association content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!