关于ElementUI表格中树节点图标替换,以下方式在html+css+js下亲测无误,对于vue脚手架需要样式穿透,使用深度作用选择器进行适当修改即可。
// 有子节点 且未展开
.el-table .el-icon-arrow-right:before {
background: url("../images/folder.png") no-repeat;
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
// 有子节点 且已展开
.el-table .el-table__expand-icon--expanded {
.el-icon-arrow-right:before {
background: url("../images/folderOpen.png") no-repeat;
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
}
// 没有子节点
.el-table .el-table__placeholder::before {
background: url("../images/file.png") no-repeat;
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
// 展开折叠时不进行动画,否则图标会旋转
.el-table .el-table__expand-icon--expanded {
transform: none;
}
图标来源于iconfont