原本的展开行效果:

来源于element官网 组件

目标的展开行效果:

未展开时候为加号+边框,展开过程无动效,展开后是减号+边框

 

实现效果代码:

    /*修改展开按钮的样式 start*/
    /*1.取消原本展开的旋转动效*/
    el-table__expand-icon{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    /*2.展开按钮未点击的样式是加号带边框*/
     el-table__expand-icon .el-icon-arrow-right:before{
        content: "\e6d9";
        border: 1px solid #ccc;
        padding: 2px;
    }
    /*3.展开按钮点击后的样式是减号带边框*/
    .el-table__expand-icon--expanded .el-icon-arrow-right:before{
        content: "\e6d8";
    }
    /*修改展开按钮的样式 end*/

content内的\e6d9等图标代号,可以通过在https://element.eleme.cn/#/zh-CN/component/icon,右键审查元素,鼠标移到对应图标上面,查看styles中的content获取(如下图):

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐