在使用element-ui的展开表格时,遇到一个这样的需求,希望展开的时候,图标是-, 收起的时候,图标是+。
在网上找了很多方法,说是自定义一个按钮通过js事件来控制,但我这里逻辑没有那么复杂,只是样式需要调整,于是想着能不能通过自定义CSS样式来改变。
/*修改展开按钮的样式 start*/
/deep/ .el-table__expand-icon{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*2.展开按钮未点击的样式是加号带边框*/
/deep/ .el-table__expand-icon .el-icon-arrow-right:before{
content: "\e6d9";
border: 1px solid #ccc;
padding: 2px;
}
/*3.展开按钮点击后的样式是减号带边框*/
/deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before{
content: "\e6d8";
}
加上deep,是因为这里是局部修改样式,所以不加deep的话,修改没有效果。
这样就可以改成以下效果啦。