el-table树形结构自定义图标

前言：

        这个是我自己从其他地方看过了，为了防止以后找不到做的一篇记录。

        原文在这：el-table树形结构修改图标_一周一篇文的博客-CSDN博客

本篇文章主要在以下业务场景使用：

vue+element开发时，el-table的树形结构，自带的图标不能满足项目需求。需要我们自己修改图标。

示例图：

       el-table自带的效果图：

        

自定义之后效果图：

        

如何实现以上效果（直接上代码）：

//原本样式的图标点击后会有90°的旋转，此样式把旋转取消。
/deep/ .el-table__expand-icon--expanded {
    transform: rotate(0deg);
}

//因为我放的是两张图片比较大，修改放图标元素的宽度才能放得下图标
/deep/ .el-table [class*=el-table__row--level] .el-table__expand-icon {
    width: 40px;
}

//有子节点 且未展开
.el-table /deep/ .el-icon-arrow-right:before {
    background-image:url('图标路径'),url('图标路径');
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;
    //原本content是一个图标，置为空
    content: '';
    display: block;
    width: 35px;
    height: 19px;
    background-size: 15px;
}

//有子节点 且已展开
/deep/ .el-table__expand-icon--expanded {
    .el-icon-arrow-right:before {
        background: url('图标路径'), url('图标路径');
        background-repeat: no-repeat, no-repeat;
        background-position: left bottom, right bottom;
        content: '';
        display: block;
        width: 35px;
        height: 19px;
        background-size: 15px;
    }
}

//没有子节点
/deep/.el-table__placeholder::before {
    background: url('图标路径') no-repeat;
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    font-size: 15px;
    background-size: 15px;
}

有不会的从这里去找原作者就行了：

el-table树形结构修改图标_一周一篇文的博客-CSDN博客