el-tree一级二级三级展示不同图标
时间: 2023-08-12 11:58:10 浏览: 241
您可以通过使用 el-tree 的自定义节点模板来实现一级、二级和三级节点展示不同图标的效果。以下是一个示例代码:
```html
<template>
<el-tree :data="treeData" :node-key="nodeKey" :props="defaultProps" :expand-on-click-node="false">
<span class="custom-node" slot-scope="{ node, data }">
<i :class="getIcon(node, data)"></i>
{{ node.label }}
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '一级节点',
children: [
{
label: '二级节点',
children: [
{
label: '三级节点'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
nodeKey(node) {
return node.label;
},
getIcon(node, data) {
if (node.level === 0) {
return 'el-icon-folder';
} else if (node.level === 1) {
return 'el-icon-document';
} else if (node.level === 2) {
return 'el-icon-notebook-2';
}
}
}
};
</script>
<style>
.custom-node {
display: flex;
align-items: center;
}
</style>
```
在上面的代码中,我们通过 `el-tree` 组件的 `slot-scope` 属性来定义了一个自定义节点模板。在模板中,我们根据节点的层级来决定显示不同的图标,然后使用 `getIcon` 方法返回对应的图标 class。通过设置不同的图标 class,我们就可以实现一级、二级和三级节点展示不同图标的效果。
请根据您的具体需求修改代码中的图标样式和数据结构。希望对您有帮助!