preface
In the project, we often need to display data in a tree structure. By default, the tree structure is a small triangle icon. Sometimes, it needs to be modified, which requires us to customize
1. Default value of e-tree
Actually, I think the triangle looks pretty good, but I can’t help it if the boss wants to change it.
2. Check element’s website
According to the properties provided on the official website, the result is that ICONS are displayed for all subdepartments, and ICONS are not displayed for those without subdepartments, which obviously does not meet the requirements.
To solve the above situation, I can only set the property as follows (icon-class=” “double quotes must have Spaces between them) and hide the tree control icon.
Then set the code in front of the data you want to add the icon
<i v-if="data.children.length! = = 0" :class="node.expanded ? 'el-icon-remove' : 'el-icon-circle-plus'" />
<i v-else class="el-icon-user-solid" />
Copy the code
Node contains information expanded and hidden by tree controls. Remember to define slot-scope=”{data,node}” in the scope slot. You can also see this information in the vue debugger
The last
Hope to organize the information to help you, like the words please help to like
If you have any suggestions, feel free to leave them in the comments section
Please also criticize the inadequacies, thank you!
(Images from the Internet, such as assault and deletion)