AntDesignVue --tree 樹形插件自定義圖標。 index.vue樹形區域的代碼如下，重點就是①那個“showIcon” 參數要等於“true”；②寫幾個img標簽顯示你自定義的圖標，img標簽加“slot”屬性。 <a-tree showIcon="true" showLine > ...
AntDesignVue --tree 樹形插件自定義圖標。
- index.vue樹形區域的代碼如下，重點就是①那個“showIcon” 參數要等於“true”；②寫幾個img標簽顯示你自定義的圖標，img標簽加“slot”屬性。
<a-tree showIcon="true" showLine >
<img src="../../assets/total.png" slot="total" style="width:18px;height:18px;">
<img src="../../assets/sub.png" slot="sub" style="width:18px;height:18px;">
</a-tree>
- 用於渲染樹的數據要求有個參數與那幾個img標簽中的"slot"屬性值對應。
[
{
title:"節點1",
key:"0",
nodeType:"total",
//slots+icon 組合只是在原有基礎圖標後面，文字前面加一個圖片。（葉子節點會有原來的一張紙的圖標，其他上層節點會有加號減號）
slots:{
icon:"total"
},
children:[
{
title:"節點2",
key:"0",
nodeType:"sub",
//scopedSlots+switcherIcon 組合是先把原有基礎圖標刪掉，再在文字前面加一個圖片。（葉子節點效果很好，其他上層節點會不知道開沒開）
scopedSlots:{
switcherIcon:"sub"
},
children:[
{}
]
}
]
};
]
- 效果圖如下：
