el-tree一级二级三级展示不同图标
时间: 2023-08-12 15:58:55 浏览: 389
要为 el-tree 的一级、二级和三级节点展示不同的图标,您可以使用 el-tree 的 `node-key` 属性以及 `render-content` 插槽来实现。
首先,您需要为每个节点提供一个唯一的 `node-key` 值,以便在渲染时进行识别。接下来,使用 `render-content` 插槽来自定义节点的内容和样式。
下面是一个示例代码,展示了如何根据节点级别设置不同的图标:
```html
<template>
<el-tree :data="treeData" :node-key="nodeKey">
<template v-slot:default="{ node }">
<span>
<i :class="getIconClass(node)" style="margin-right: 5px;"></i>
{{ node.label }}
</span>
</template>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '一级节点',
level: 1,
},
{
label: '一级节点',
level: 1,
children: [
{
label: '二级节点',
level: 2,
},
{
label: '二级节点',
level: 2,
children: [
{
label: '三级节点',
level: 3,
},
],
},
],
},
],
nodeKey: 'label', // 使用 label 作为节点的唯一标识
};
},
methods: {
getIconClass(node) {
switch (node.level) {
case 1:
return 'el-icon-folder';
case 2:
return 'el-icon-tickets';
case 3:
return 'el-icon-document';
default:
return '';
}
},
},
};
</script>
```
在上面的示例中,我们根据节点的 `level` 属性来动态地返回不同的图标类名。您可以根据您的实际需求修改图标类名和样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)