重点：template蒙版下svg和use，然后前端遍历添加key和value，取判断放图标
HTML结构：el-tree里面包裹template（关键点）
<el-tree
:data="treeData"
....
>
//关键步骤
<template #default="{ node, data }">
<span class="custom-tree-node">
<svg class="icon svg-icon" aria-hidden="false">
<use :xlink:href="`#` + data.icon"></use>
</svg>
<span>
{
{ data.name }}
</span>
</span>
</template>
</el-tree>方法一：使用for循环
for循环数据，前端自定义tree图标第一种方法，后端key没有icon字段，自己添加
//遍历数据
for(const key in obj){
// console.log(obj[key]);
//前端自定义tree图标第一种方法
if (obj[key].nodeType===1) {
//后端key没有icon字段，自己添加
obj[key].icon="icon-chang"
}else if(obj[key].nodeType===22){
obj[key].icon="icon-peizhi"
}else if(obj[key].nodeType===234){
obj[key].icon="icon-jiance"
} 方法二： 使用map遍历
直接map遍历前端自定义tree图标
res.data.data.map((v) => {
//第二种方法
//前端自定义tree图标
if (v.nodeType == 1) {
v.icon = "icon-chang";
} else if (v.nodeType == 22) {
v.icon = "icon-peizhi";
} else if (v.nodeType == 234) {
v.icon = "icon-jiance";
}完整代码:
//html
<el-tree
v-model="filterText"
:load="loadNode"
lazy
ref="deptTreeRef"
:data="datalist.tree"
node-key="id"
:props="{ label: 'name', isLeaf: 'leaf' }"
highlight-current
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<svg class="icon svg-icon" aria-hidden="false">
<use :xlink:href="`#` + data.icon"></use>
</svg>
<span>
{
{ data.name }}
</span>
</span>
</template>
</el-tree>
//js
//获取tree数据
const treeList = (key, resolve) => {
HeaderList({
id: key,
childNodeType: 2324,
})
.then((res) => {
if (res.status === 200) {
//核心代码
// //for循环
//let obj=res.data.data
// //遍历数据
//for(const key in obj){
// //前端自定义tree图标第一种方法
//if (obj[key].nodeType===1) {
// //后端key没有icon字段，自己添加
//obj[key].icon="icon-chang"
//}else if(obj[key].nodeType===22){
//obj[key].icon="icon-peizhi"
//}else if(obj[key].nodeType===234){
//obj[key].icon="icon-jiance"
//}
//}
return resolve(
res.data.data.map((v) => {
//第二种方法
//前端自定义tree图标
if (v.nodeType == 1) {
v.icon = "icon-chang";
} else if (v.nodeType == 22) {
v.icon = "icon-peizhi";
} else if (v.nodeType == 234) {
v.icon = "icon-jiance";
}
// console.log(v.nodeType);
TreeNode.value.loaded = false;
// 主动调用展开节点方法，重新查询该节点下的所有子节点
TreeNode.value.expand();
return { ...v, leaf: !v.hasChildren};
})
);
}
})
.catch(() => {
return Promise.resolve([]);
});
};
//css
.icon {
width: 20px;
height: 20px;
font-size: 20px;
//margin-right: 10px;
//margin-left: 4px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}作者上一篇文章，