el-tree树形控件修改节点图标
一、代码
<el-tree
:data="dataTree"
:props="defaultProps"
node-key="id"
highlight-current
ref="dataConfigTree"
:expand-on-click-node="false"
accordion
nodeChange.isLeaf="true"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
></el-tree>
data() {
return {
dataTree: [],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
},
```javascript
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.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/tagAdd.png') no-repeat 0 3px;
content: '';
display: block;
width: 20px;
height: 20px;
font-size: 16px;
background-size: 16px;
}
/* //有子节点 且已展开 */
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url('../../../../assets/images/tagDel.png') no-repeat 0 3px;
content: '';
display: block;
width: 20px;
height: 20px;
font-size: 16px;
background-size: 16px;
}
/* //没有子节点 */
.el-tree .el-tree-node__expand-icon.is-leaf::before {
background: #fff;
content: '';
display: block;
width: 0px;
height: 0px;
font-size: 16px;
background-size: 16px;
}
//高亮字体颜色
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
color: #409eff !important;
}
链接: https://blog.csdn.net/m0_49471668/article/details/121808338.
链接: https://blog.csdn.net/qq_41579104/article/details/115348469