How does the elementui tree control listen to the expanded state of a node?

< H2 > how does the elementui tree control listen to the expanded state of a node? < / H2 > 
<el-tree 
                :data="treeDatas" 
                :props="defaultProps" 
                :default-expand-all="true" 
                @node-click="handleNodeClick"
                :expand-on-click-node="false"
                :indent = "10"                 
                ref="tree">
                  <span class="custom-tree-node" slot-scope="{ node, treeDatas }">
                    <span :class="handleClass(node.data)"><i :class="node.icon"></i>{{ node.label }}</span>
                  </span>
                </el-tree>
The requirement of the

project is to change the small icon of the current node when the state of the node deployment changes. The icon is the icon component in the elementUI used.
now is stuck in getting the status of the node here, ask all the gods for guidance!

Vue.js
Aug.27,2021
The callback of the

node-click node when clicked consists of three parameters: the object corresponding to the node in the array passed to the data attribute, the Node corresponding to the node, and the node component itself.

Tree control node-click method after clicking will pass three parameters, usually just print the first in console.log will find that only label keyword information, need to obtain the subset or parent information are not, then you need to pass, print the second parameter Node, where you will find a lot of useful information. Using the method of changing icons, I use the author, but I find that after using custom icons, there are menu alignment problems, with and without subsets, the way is to let them all have icons, and then judge whether there is a subset. Make the transparency of the tree menu without a subset 0.

Previous: Vue cli3.0 scaffolding reported an error

Next: Data structure, the problem of queue head pointer front, queue tail pointer rear

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu