el-tree setting radio, click to close after finishing

It can be used when the page layout space is insufficient. Click to display the tree drop-down, and retract it after the selection is completed. Here, the tree component can only be single-selected. Specifically, you can configure it at will.

The node-key must be added to mark each node.
The expanded attribute is to set the expansion and collapse of each node, and to traverse each node and set expanded to false to collapse the nodes of the tree.
setCheckedNodes Set the currently checked nodes, using this method must set the node-key attribute in advance.
The @check event is triggered after clicking the node check box.
There are two parameters in sequence: the object corresponding to the node in the array passed to the data attribute, the current selected state object of the tree, and currObj to save the currently selected node data. Use setCheckedNodes to set the checked nodes to currObj.
insert image description here

html code

 <el-tree
                :data="treeData"
                :props="defaultProps"
                node-key="id"
                ref="tree"
                show-checkbox
                @check="handleNodeChecked"
              ></el-tree>

js part of the code

 const handleNodeChecked = (currObj, isChecked) => {
    
    
      const nodeDatas = proxy.$refs.tree.store.nodesMap;
      for (let key in nodeDatas) {
    
    
        nodeDatas[key].expanded = false;
      }
      if (isChecked) {
    
    
        proxy.$refs.tree.setCheckedNodes([currObj]);
      }
    };

Guess you like

Origin blog.csdn.net/m0_49016709/article/details/125987855