要專門向 el-tree 中的父節點添加圖標,您可以利用 node-key 屬性以及作用域插槽功能由 Vue.js 提供。以下是實現此目的的方法:
<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>
是的,可以將圖示放置限制在 el-tree 中的父節點el-tree 透過使用 isParent
屬性。此屬性在 Vue.js 為樹中每個節點提供的作用域槽中可用。
專門為el-tree 中的父節點新增圖示的正確語法如下:
<code class="html"><span slot-scope="{ node, data }"> <i v-if="data.isParent" class="el-icon"></i> {{ node.label }} </span></code>
在此語法中,您使用data.isParent
條件來檢查目前節點是否為父節點。如果是,您可以使用 <i>
元素新增圖示並指定所需的圖示類別。
以上是el-tree 只在父節點前面加icon的詳細內容。更多資訊請關注PHP中文網其他相關文章!