el-tree 父子节点自定义不同的图标
时间: 2023-07-20 10:32:01 浏览: 172
el-select-tree:ElementUI的el-select与el-tree结合
5星 · 资源好评率100%
您可以使用 `scoped-slot` 来自定义每个节点的图标。具体步骤如下:
1. 在 `el-tree` 中使用 `scoped-slot` 定义节点的 `icon` 属性,如下所示:
```html
<el-tree :data="data">
<template slot-scope="{ node }">
<span :class="node.icon"></span>
{{ node.label }}
</template>
</el-tree>
```
2. 在每个节点中定义自己的 `icon` 属性,如下所示:
```javascript
data: [
{
label: '节点一',
icon: 'el-icon-folder',
children: [
{
label: '子节点一',
icon: 'el-icon-document'
}
]
}
]
```
在这个例子中,父节点使用 `el-icon-folder` 作为图标,子节点使用 `el-icon-document` 作为图标。您可以根据自己的需要,使用不同的类名和图标来自定义每个节点的图标。
阅读全文