1.在树结构对应的数据中,给需要自定义层的数据添加scopedSlots属性
this.siteList = [{
name: "parent1",
children: [
{
name: "children1",
},
],
},
{
name: "parent2",
children: [
{
name: "children1",
},
{
name: "children2",
},
],
}];
this.treeData.forEach( parent => {
parent.scopedSlots = {
title: "parent",
};
parent.children.forEach( son => {
son.scopedSlots = {
title: "son",
};
})
})
2. 在template中输入自定义内容
<a-tree :tree-data="treeData">
<template slot="parent" slot-scope="item">
<img src="../assets/img/parent.png" alt="">
<span>{{ item.name }}</span>
</template>
<template slot="son" slot-scope="item">
<img src="../assets/img/son.png" alt="">
<span>{{ item.name }}</span>
</template>
</a-tree>
效果如图