使用elementui自带的图标,原先表格的下拉箭头是这样的
如果想按照elementui自带的图标进行修改,右边tab选择到图标对应处,F12打开开发者工具选择想要使用的图标,在开发工具中打开自定义图标会发现图表可以结合伪元素:after进行content输入选择对应的图标。
针对表格的展开行图标自定义,也可以按照:before设置content进行图标选择,下面提供一种方式:
/deep/.el-table__expand-column .cell {
.el-table__expand-icon--expanded {
// 这是点击后的旋转角度
transform: rotate(0deg);
}
/deep/.el-table__expand-icon {
.el-icon-arrow-right:before {
//这是收起图标
content: "\e723";
font-size: 14px;
}
}
/deep/ .el-table__expand-icon--expanded {
.el-icon-arrow-right:before {
// 这是展开图标
content: "\e722";
font-size: 14px;
}
}
}
得到的结果图,更换了原始的箭头样式