原效果如下:
修改样式后显示效果如下:
实现的目标是,点开的节点前面的图标与未点开的节点不同,并且叶子节点前没有图标。
template
的写法如下:
<div style="width: 20%;margin-right:1rem;">
<el-tree :data="treeDataList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>复制代码
CSS
写法如下:
.el-tree .el-tree-node__expand-icon.expanded
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before
{
background: url("../../../assets/images/folder.png") no-repeat 0 3px;
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
background: url("../../../assets/images/folder1.png") no-repeat 0 3px;
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.el-tree-node__expand-icon.is-leaf::before
{
display: none;
}复制代码
使用的图标来源于iconfont,主要知识点是CSS伪元素和element中的树形组件。