Maison >interface Web >Questions et réponses frontales >el-tree ajoute uniquement une icône devant le nœud parent
Pour ajouter des icônes spécifiquement aux nœuds parents dans el-tree, vous pouvez utiliser l'accessoire node-key ainsi que la fonctionnalité de slot étendue fournie par Vue.js. Voici comment y parvenir :
<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>
Oui, il est possible de limiter le placement des icônes aux nœuds parents dans el-tree en utilisant isParent Propriété
. Cette propriété est disponible dans l'emplacement de portée fourni par Vue.js pour chaque nœud de l'arborescence.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
pour vérifier si le nœud actuel est un nœud parent. Si c'est le cas, vous pouvez ajouter une icône à l'aide de l'élément <i>
et spécifier la classe d'icône souhaitée.🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!