In the tree component, we usually render it on the page to represent the process of an organizational structure, but generally when doing it, we will set the open and close as two different font icons and can switch when clicking
The effect picture is as follows:
Before opening, there is a small plus sign icon, after opening, there is a small minus sign icon
specific method:
Use the element-ui component to set the style:
icon-class = "icon class name" can set icon style
But if we want to achieve dynamic switching, we can't set it directly, we need to use the #default method
Note that in #default, not only the data attribute can be set to pass the data rendering view, but also the response status of the tree node can be viewed by setting node
The state of the icon can be viewed in the vue component
Before we click on the small icon, the value of the attribute expanded is false
After clicking the small icon to expand, the value of expanded is true
Set icon-class="" to dynamically switch icon icons
<i v-if="data.children.length===0" class="el-icon-circle-plus-outline" />
Monitor whether there is a value in children, if there is no value, it means that the current branch is the bottom branch, and the icon shows a small minus sign (el-icon-remove-outline)
<i v-else :class="node.expanded?'el-icon-remove-outline':'el-icon-circle-plus-outline'" />
If there is a value in the children array, it means that there is a branch under it. Before clicking, it is a small plus sign (el-icon-circle-plus-outline), and after clicking, it is a small minus sign (el-icon-circle-plus-outline)
