a question
The default icon style of Ele.me UI is:
1. An arrow, expand and automatically rotate 90° clockwise, the above condition is that the node has child nodes,
2. If it is a node without child nodes, it is a blank icon by default (here I think it is not without, but has a placeholder but is blank)
According to the official website document, set the icon-class to set a custom icon to replace the default arrow, but it is more difficult to control the style of expanding and collapsing, so we adopt the method of customizing the icon here.
Two operations
1. First remove the default icon and set it directly in the tree component
Effect
2. The slot of the tree receives the data node, and uses the svg-icon component (this component needs to be configured, please use Baidu) to dynamically render the corresponding icon according to the length attribute of the expanded node and the children of the data
node.expanded : The expansion of the node
data.children.length : The length of the array of child nodes. If it is 0, it means there are no child nodes. Here you need to convert the array to a tree, but reading this article shows that you must know the operation of tree conversion, so I won’t repeat it here
Effect
If you don't want the end child node to have an icon, set display none directly