Home > Article > Web Front-end > el-tree only adds icon in front of the parent node
To add icons specifically to parent nodes in el-tree, you can utilize the node-key prop along with the scoped slot feature provided by Vue.js. Here's how you can achieve this:
<code class="javascript"><template> <el-tree :data="treeData"> <span slot-scope="{ node, data }"> <i v-if="data.isParent" class="el-icon-folder-opened"></i> {{ node.label }} </span> </el-tree> </template> <script> export default { data() { return { treeData: [ { label: 'Parent Node 1', children: [ { label: 'Child Node 1' }, { label: 'Child Node 2' }, ], }, { label: 'Parent Node 2', children: [ { label: 'Child Node 3' }, { label: 'Child Node 4' }, ], }, ], }; }, }; </script></code>
Yes, it is possible to limit icon placement to parent nodes in el-tree by employing the isParent
property. This property is available within the scoped slot provided by Vue.js for each node in the tree.isParent
property. This property is available within the scoped slot provided by Vue.js for each node in the tree.
The correct syntax to add icons specifically to parent nodes in el-tree is as follows:
<code class="html"><span slot-scope="{ node, data }"> <i v-if="data.isParent" class="el-icon"></i> {{ node.label }} </span></code>
In this syntax, you use the data.isParent
condition to check if the current node is a parent node. If it is, you can add an icon using the <i>
data.isParent
condition to check if the current node is a parent node. If it is, you can add an icon using the <i>
element and specify the desired icon class.🎜The above is the detailed content of el-tree only adds icon in front of the parent node. For more information, please follow other related articles on the PHP Chinese website!