Heim > Artikel > Web-Frontend > el-tree fügt nur ein Symbol vor dem übergeordneten Knoten hinzu
Um Symbole speziell zu übergeordneten Knoten in el-tree hinzuzufügen, können Sie die Node-Key-Requisite zusammen mit der von Vue.js bereitgestellten Scoped-Slot-Funktion verwenden. So können Sie dies erreichen:
<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>
Ja, es ist möglich, die Symbolplatzierung auf übergeordnete Knoten im El-Baum zu beschränken, indem Sie den isParent verwenden
-Eigenschaft. Diese Eigenschaft ist innerhalb des von Vue.js für jeden Knoten im Baum bereitgestellten Bereichsslots verfügbar.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
, um zu überprüfen, ob der aktuelle Knoten ein übergeordneter Knoten ist. Wenn dies der Fall ist, können Sie mit dem Element <i>
ein Symbol hinzufügen und die gewünschte Symbolklasse angeben.🎜Das obige ist der detaillierte Inhalt vonel-tree fügt nur ein Symbol vor dem übergeordneten Knoten hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!