自定义Element-UI的表格展开和收起图标

 在使用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的话，修改没有效果。

这样就可以改成以下效果啦。