vue中ElementUI Tree树形控件的树节点checkbox图标设置方法

当我们在vue中用elementUI的树形控件时，如果想要改变checkbox的图标，让每一层都有一个自己的图标如下图，应该怎么做呢？

效果图：

 直接上代码，下面会附上解析：

<template>
    <el-tree
        :data="data"
        show-checkbox
        node-key="_id"
        icon-class="none"
        :props="defaultProps">
    </el-tree>
</template>

<script>
export default {
    name: 'my-el-tree',
    data() {
        return {
            data: [{
                id: 1,
                label: '一级 2',
                children: [{
                    id: 3,
                    label: '二级 2-1',
                    children: [{
                    id: 4,
                    label: '三级 3-1-1'
                    }, {
                    id: 5,
                    label: '三级 3-1-2'
                    }]
                }, {
                    id: 2,
                    label: '二级 2-2',
                    children: [{
                    id: 6,
                    label: '三级 3-2-1'
                    }, {
                    id: 7,
                    label: '三级 3-2-2'
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    }
}
</script>

<style lang="less">
    .el-tree {
        background-color: pink;
        & > .el-tree-node {
            // 第一层
            .el-checkbox__inner {// 未选中的 checkbox 样式
                background: url('@/assets/Images/项目收缩.png');
                background-size: contain;
                border: none;
                border-radius: none;
                width: 16px;
                height: 16px;
            }
            .is-checked .el-checkbox__inner {// 选中的 checkbox 样式
                background: url('@/assets/Images/项目显示.png');
                background-size: contain;
                border: none;
                border-radius: none;
                width: 16px;
                height: 16px;
                &::after {
                    display:none;
                }
            }
            .is-indeterminate .el-checkbox__inner {// 半选中的 checkbox 样式
                background: url('@/assets/Images/项目收缩.png');
                background-size: contain;
                border: none;
                border-radius: none;
                width: 16px;
                height: 16px;
                &::before {
                    display:none;
                }
            }
            // 第二层
            & > .el-tree-node__children {
                .el-checkbox__inner {// 未选中的 checkbox 样式
                    background: url('@/assets/Images/工程收缩.png');
                    background-size: contain;
                    border: none;
                    border-radius: none;
                    width: 16px;
                    height: 16px;
                }
                .is-checked .el-checkbox__inner {// 选中的 checkbox 样式
                    background: url('@/assets/Images/工程展开.png');
                    background-size: contain;
                    border: none;
                    border-radius: none;
                    width: 16px;
                    height: 16px;
                    &::after {
                        display:none;
                    }
                }
                .is-indeterminate .el-checkbox__inner {// 半选中的 checkbox 样式
                    background: url('@/assets/Images/工程收缩.png');
                    background-size: contain;
                    border: none;
                    border-radius: none;
                    width: 16px;
                    height: 16px;
                    &::before {
                        display:none;
                    }
                }
                // 第三层
                & > .el-tree-node > .el-tree-node__children {
                    .el-checkbox__inner {// 未选中的 checkbox 样式
                        background: url('@/assets/Images/图层组常态.png');
                        background-size: contain;
                        border: none;
                        border-radius: none;
                        width: 16px;
                        height: 16px;
                    }
                    .is-checked .el-checkbox__inner {// 选中的 checkbox 样式
                        background: url('@/assets/Images/图层组交互.png');
                        background-size: contain;
                        border: none;
                        border-radius: none;
                        width: 16px;
                        height: 16px;
                        &::after {
                            display:none;
                        }
                    }
                    .is-indeterminate .el-checkbox__inner {// 半选中的 checkbox 样式
                        background: url('@/assets/Images/图层组常态.png');
                        background-size: contain;
                        border: none;
                        border-radius: none;
                        width: 16px;
                        height: 16px;
                        &::before {
                            display:none;
                        }
                    }
                }
            }
        } 
    }
    
</style>

解析：

一、基础配置

elementUI的树形控件中，加上show-checkbox属性，就会在所有树枝前出现checkbox复选框。

 效果图如下：

 如果想删除checkbox前面的三角箭头，可以加上icon-class="none"的属性

 效果图如下：

二、更改checkbox图标

现在我们就想办法更改checkbox的图标。

首先我们在浏览器按F12可以看到整个树形结构的代码结构

一级的el-tree包含el-tree-node，el-tree-node中包含el-tree-node_content和el-tree-node_children，当有子分支的时候才会有el-tree-node_children。

checkbox有三种状态——选中、半选中、未选中，半选中是指有多个子树枝在部分被选中且没有全部被选中时，父树枝就成为半选中状态，我们可以分别对这三种状态设置图标：

el-tree > .el-tree-node {
    // 第一层
    .el-checkbox__inner {// 未选中的 checkbox 样式
        background: url('@/assets/Images/项目收缩.png');
        background-size: contain;
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
    }
    .is-checked .el-checkbox__inner {// 选中的 checkbox 样式
        background: url('@/assets/Images/项目显示.png');
        background-size: contain;
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
        &::after {
           display:none;
        }
    }
    .is-indeterminate .el-checkbox__inner {// 半选中的 checkbox 样式
        background: url('@/assets/Images/项目收缩.png');
        background-size: contain;
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
        &::before {
           display:none;
        }
    }
}

 想给子树枝设置样式就可以找到.el-tree-node__children来设置，下面开头的&是指el-tree-node。

& > .el-tree-node__children {
    .el-checkbox__inner {// 未选中的 checkbox 样式
        background: url('@/assets/Images/工程收缩.png');
        background-size: contain;
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
    }
    .is-checked .el-checkbox__inner {// 选中的 checkbox 样式
        background: url('@/assets/Images/工程展开.png');
        background-size: contain;
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
        &::after {
            display:none;
        }
    }
    .is-indeterminate .el-checkbox__inner {// 半选中的 checkbox 样式
        background: url('@/assets/Images/工程收缩.png');
        background-size: contain;
        border: none;
        border-radius: none;
        width: 16px;
        height: 16px;
        &::before {
            display:none;
        }
    }
}

 三、注意点

由于.el-tree-node__children里也有.el-tree-node、el-tree-node_content和.el-tree-node__children

所以如果我们直接写 .el-tree .el-tree-node {}，那.el-tree-node__children里的 .el-tree-node也会受影响，所以在这里要使用子元素选择器 >，与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

PS：以上仅为个人学习中遇到的问题和解决方案，可供大家参考， 如果有错误欢迎在评论区指出或探讨，谢谢！