vue element 修改table expand展开行的图标以及动效

原本的展开行效果：

来源于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获取（如下图）：