el-tree添加icon
时间: 2023-10-08 18:10:46 浏览: 50
你可以使用 `el-tree` 组件的 `node-icon` 属性来添加图标。这个属性接受一个函数,用于根据节点数据返回对应节点的图标。你可以在这个函数中根据节点的数据进行判断,然后返回相应的图标。以下是一个示例:
```html
<el-tree :data="treeData" :node-icon="getNodeIcon"></el-tree>
```
```javascript
methods: {
getNodeIcon(node) {
if (node.isLeaf) {
return "el-icon-document"; // leaf 节点的图标
} else if (node.children && node.children.length > 0) {
return "el-icon-folder"; // 可展开的父节点的图标
} else {
return "el-icon-loading"; // 正在加载的父节点的图标
}
}
},
data() {
return {
treeData: [
{
label: "Node 1",
isLeaf: true
},
{
label: "Node 2",
children: [
{
label: "Node 2-1",
isLeaf: true
},
{
label: "Node 2-2"
}
]
}
]
};
}
```
以上示例中,根据节点的 `isLeaf` 属性返回不同的图标。你可以根据自己的需求来设置不同的图标。