This is the fourth day of my participation in the August Text Challenge.More challenges in August

Attribute check – strictly

The official documentation provides the property check-strictly, which indicates whether the parent and child are strictly not associated when the check box is displayed. The default is false.

This property means:

The default is false, parent-child association. The following phenomena and problems occur:

  • 1. When you set the check node through the function, as long as the parent node is checked, the child node will be checked, even if the check list does not have the child node.
  • 2. When you click the check box, if you click the parent node, all its sub-nodes will change with the parent node; If you click the child node, the parent node is half-selected when the child nodes are partially selected, the parent node is selected when all the child nodes are selected, and the parent node is not selected when all the child nodes are not selected.

Set true to strictly observe that children are not related to each other.

  • 1. When you select a node through a function, you can determine whether it is selected strictly by setting whether the node is in the checked list.
  • 2. When you click the check box, whichever node you click will only change the check state of the current node, there is no half-select state.

System role menu control problem

The problem is that when the system’s role menu is controlled, the following conditions need to be met:

  • 1. When selecting nodes through function Settings, it is necessary to determine whether the nodes are selected strictly by checking whether the nodes are included in the list to be selected, that is, selecting the parent node rather than all the child nodes.
  • 2. When you click the check box, if you click the parent node, all its sub-nodes change with the parent node.
  • 3. When you click the check box, if you click the child node, the parent node is half-selected when the child node is partially selected, the parent node is selected when all the child nodes are selected, and the parent node is not selected when all the child nodes are not selected.

Need thinking:

Check -strictly=false

According to the conditions that need to be met, it is obviously close to set check-strictly to false, so from the basis of the correlation between check-strictly=false, the problem that needs to be solved is:

Change the parent node corresponding to the child node that is not fully checked to half-checked state, but find the document for a long time without success.

Only getHalfCheckedKeys and getHalfCheckedNodes are not set to half-checked.

Check -strictly=true

Check -strictly=true Check -strictly=true

  • 1. When you click the check box, if you click the parent node, all its sub-nodes change with the parent node.
  • 2. When you click the check box, if you click the child node, the parent node is half-selected when the child node is partially selected, the parent node is selected when all the child nodes are selected, and the parent node is not selected when all the child nodes are not selected.

In the case of strict parent-child disassociation, clicking the parent-child node will not result in the semi-selected state, nor can the function set the semi-selected state, but the problem can be simplified:

  • 1. When clicking the check box, if the status is selected:
  • 1.1. All its parent nodes (the parent node, the parent node’s parent node and so on) follow the current node to be selected.
  • 1.2. All its child nodes are selected as the parent node.
  • 2. When you click the check box, if the status is not selected, all the children of the parent node change to be unselected.

Solution code:

1. Attributes of the el-tree label

<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">
Copy the code
  • Node-key: An attribute used by each tree node as a unique identifier. The entire tree should be unique. Identifies the unique key-value name of the node.
  • Default-checked -keys = checkedId: indicates the ID selected by default during the initialization of the multi-selected el-tree component
  • Check-strictly = true: Indicates whether to strictly follow the practice that fathers and sons are not related to each other
  • Check: Method triggered when a check box is clicked
  • Props: configuration options, as shown in the following figure.

If (props=”multiProps”)

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

The childs field is identified as the child node name. The default is children. Label is identified as the node name.

2. Re-assign the value to the multi-selected tree when the el-tree component changes

Updated () {$refs.tree.setCheckedKeys(this.checkeDid)},Copy the code

CheckedId is an array of checked nodes and does not distinguish between parent and child nodes.

3. Special treatment when the check box is clicked

ClickDeal (currentObj, treeStatus) {// Used for: when the parent node is not strictly associated with the parent node, the parent node notifies the child node to synchronize the change. Let selected = treeStatus. CheckedKeys. IndexOf (currentObj. MenuId) was not selected / / / / - 1 selected the if (selected! == -1) {this.selectedParent(currentObj) {this.unitechildSame (currentObj, currentObj, currentObj, currentObj); If (currentobj.childs.length!)} else {// Unselected if (currentobj.childs.length! UniteChildSame (currentObj, false) {this.unitechildsame (currentObj, false) {this.unitechildsame (treeList, false)}}, isSelected) { this.$refs.tree.setChecked(treeList.menuId, isSelected) for (let i = 0; i < treeList.childs.length; i++) { this.uniteChildSame(treeList.childs[i], isSelected) } }, 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) } },Copy the code