Vue ElementUI el-tree 修改节点收缩 icon

需求：el-tree 父节点收缩 icon 展开和隐藏样式修改。

一、原始样式 

 二、修改后

 三、代码

Html：注意 el-tree 标签上有一个 div 。

<div class="eltree-main">
    <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]">
    </el-tree>
</div>

CSS：注意这里使用局部 scoped ，但要使用 >>> ，否则无效。

<style lang="stylus" scoped>
.eltree-main >>> .el-tree {
    .el-tree-node__expand-icon.expanded {// 已展开的父节点 收缩 icon
        content: url('~@images/caret.png');
    }
    .el-icon-caret-right:before{// 未展开的父节点 收缩 icon
        content: url('~@images/caret.png');
    }
    .is-leaf:before {// 子节点 收缩 icon
        content: '';
    }
}
</style>

原始 icon 

展开和隐藏的父节点收缩 icon，都使用上面这个图片。组件内部做了转换，仅注意即可。