效果展示
el-tree组件默认显示时,节点是不带icon的,如需使用时,可以通过自定义插槽的方式来实现,实现方式在网络上也存在很多,本篇只简单记录个人如何实现。
功能点:
- 替换默认显示的小三角图标
- 展开即关闭节点时图标切换
- 子节点的默认显示图标
实现代码
<template>
<div class="tree">
<el-tree
:data="data5"
node-key="id"
default-expand-all
@node-expand="handlerNodeExpand"
show-checkbox
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<!-- <i :class="data.icon"></i> -->
<i
v-if="data.children.length!==0"
:class="[
node.expanded ? 'el-icon-folder-remove': 'el-icon-folder-add'
]"
></i>
<i v-if="data.children.length===0" class="el-icon-document"></i>
{{ node.label }}
</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
name: 'customIconTree',
data () {
return {
data5: [{
id: 1,
label: '一级节点 1',
icon: 'el-icon-success',
children: [{
id: 4,
label: '二级节点 1-1',
icon: 'el-icon-folder-add',
children: [{
id: 9,
label: '三级节点 1-1-1',
icon: 'el-icon-info',
children: [
{
id: 13,
label: '三级节点 1-1-1-1',
children: []
}
]
}, {
id: 10,
label: '三级节点 1-1-2',
children: []
}]
}]
},
{
id: 2,
label: '一级节点 2',
children: [{
id: 5,
label: '二级节点 2-1',
children: []
}, {
id: 6,
label: '二级节点 2-2',
children: []
}]
},
{
id: 3,
label: '一级节点 3',
children: [{
id: 7,
label: '二级节点 3-1',
children: []
}, {
id: 8,
label: '二级节点 3-2',
children: []
}]
},
{
id: 12,
label: '一级节点-4',
children: []
}
],
expandNodes: false
}
},
methods: {
handlerNodeExpand (data, node, element) {
window.console.log(data)
window.console.log(node)
window.console.log(element)
}
}
}
</script>
<style scoped>
.tree >>> .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.tree >>> .el-icon-caret-right:before {
content: "\e6d9";
color: white;
background-color: #dcdfe6;
}
.tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
content: "\e6d8";
color: white;
background-color: #dcdfe6;
}
.tree >>> .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
background-color: transparent;
}
.tree >>> .el-tree-node__content > label.el-checkbox {
margin-bottom: 2px;
}
</style>
实现解释:
通过自定义插槽的方式,在数据渲染时添加i标签,从而显示图标
通过el-tree通过的节点展开时间,在控制台输出data、node、element后可以观察发现,当点击展开节点时,node中存在一个expanded参数且值为 true:
考虑到组件封装,如果在style中将图标写死,若是想改变图标,势必会影响其他地方的显示,故绑定了icon容器span 的class属性,通过node.expanded属性来动态的改变icon的class属性,后续只需将目前写的class替换为属性,供使用者使用时按自己的需求进行绑定即可。
替换小三角为图标
将默认的小三角图标替换为自己需要的图表,这里使用的是style的方式,通过控制台查看element,找到所在的元素,然后为其设置css样式,具体参见上述完整代码。
tips:
点滴记录,汇聚江河