效果
展开文件夹时
代码
<a-tree
:treeData="treeData"
:default-selected-keys="defaultValue"
show-icon
:style="{
'min-height': '500px',
height: '700px',
'border-right': '2px solid #c1c1c1',
'overflow-y': 'auto',
}"
@select="onSelect"
@expand="onExpand"
>
<img src="./img/folder.svg" slot="folder" style="margin-right: 5px;" width="20px" />
<img src="./img/openFolder.svg" slot="openFolder" style="margin-right: 5px;" width="20px" />
</a-tree>
/* 前端给treedata赋slots值
* 使用递归处理
* 传入的参数:treedata
*/
setIcon(datas) {
var that = this
for (var i = 0; i < datas.length; i++) {
datas[i].slots = { icon: 'folder' }
if (datas[i].children.length > 0) {
that.setIcon(datas[i].children)
}
}
},
/* 点击展开有子节点的节点时 改变图标
* 通过改变其slots的值来改变图标
*/
onExpand(expandedKeys, event) {
if (event.expanded) {
event.node.dataRef.slots.icon = 'openFolder'
} else {
event.node.dataRef.slots.icon = 'folder'
}
},
如果需要改变目录节点的图标
<a-tree
:treeData="treeData"
:default-selected-keys="defaultValue"
show-icon
:style="{
'min-height': '500px',
height: '700px',
'border-right': '2px solid #c1c1c1',
'overflow-y': 'auto',
}"
@select="onSelect"
@expand="onExpand"
>
//start 目录节点的图标 务必 slot值为 switcherIcon
<a-icon slot="switcherIcon" type="down" />
// end
<img src="./img/folder.svg" slot="folder" style="margin-right: 5px;" width="20px" />
<img src="./img/openFolder.svg" slot="openFolder" style="margin-right: 5px;" width="20px" />
</a-tree>
如果有用,请给小弟一个赞的支持!谢谢