找到需要替换的节点
现在需要将箭头替换为其他icon(element的icon都可以),在F12下找到相应节点:
可以看到content中的就是箭头icon,现在只需要在css中直接覆盖这个就行了。
替换css
// 将el-table的展开图标替换为其他图标
.el-table__expand-icon{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-table__expand-icon
.el-icon-arrow-right:before{
content: "\e6d9";
border: 1px solid #ccc;
padding: 2px;
}
.el-table__expand-icon--expanded
.el-icon-arrow-right:before{
content: "\e6d8";
}
此处是将箭头替换为el-icon中的加减图标,当然加了一点边框修饰,这点不重要。
替换效果如下:
其中最上面的css是为了设置展开或者收起时,不发生旋转。