Vue ElementUI el-tree 修改默认 CheckBox 样式

Tree 树形控件​​​​​​​ 

需求：el-tree checkbox 样式修改。

一、原始样式 

二、修改后

三、代码

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-checkbox__inner {// 未选中的 checkbox 样式
        background: url('~@images/check.png');
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
    }
    .is-checked .el-checkbox__inner {// 选中的 checkbox 样式
        background: url('~@images/check-selected.png');
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
        &:after {
            display:none;
        }
    }
    .is-indeterminate .el-checkbox__inner {// 半选中的 checkbox 样式
        &:before {
            top: 7px;
        }
    }
}
</style>

原始 icon ：

 上述代码不仅设置了图片，还修改了其它样式。只要找到对应的 class name，可根据各自的 icon 做必要调整。