element-ui tree树形控件样式更改,节点后添加文字。

1.树形控件效果图

2.代码部分

1.template

<template>
    <el-tree
        class="tree"
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
        @node-click="handleNodeClick"
    >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="custom-tree-node-span">
                {{ data.number }}
            </span>
        </span>
    </el-tree>
</template>

 2.script

<script>
export default {
    data() {
        return {
            data: [
                {
                    label: "一级 1",
                    number: 2,
                    children: [
                        {
                            label: "二级 1-1",
                            number: 2,
                            children: [
                                {
                                    label: "三级 1-1-1",
                                    number: 12,
                                },
                            ],
                        },
                    ],
                },
                {
                    label: "一级 2",
                    number: 23,
                    children: [
                        {
                            label: "二级 2-1",
                            number: 222,
                            children: [
                                {
                                    label: "三级 2-1-1",
                                    number: 21,
                                },
                            ],
                        },
                        {
                            label: "二级 2-2",
                            number: 1,
                            children: [
                                {
                                    label: "三级 2-2-1",
                                    number: 0,
                                },
                            ],
                        },
                    ],
                },
                {
                    label: "一级 3",
                    number: 12,
                    children: [
                        {
                            label: "二级 3-1",
                            number: 2,
                            children: [
                                {
                                    label: "三级 3-1-1",
                                    number: 234,
                                },
                            ],
                        },
                        {
                            label: "二级 3-2",
                            number: 2,
                            children: [
                                {
                                    label: "三级 3-2-1",
                                    number: 2,
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children",
                label: "label",
            },
        };
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
        },
    },
};
</script>

 3.style

<style scoped>
.el-tree {
    background: #ffffff;
    color: #333333;
    width: 300px;
}
/* 节点样式 */
::v-deep .el-tree-node__content {
    height: 55px !important;
    border-left: 4px solid #ffffff !important;
}
/* 点击后的样式 */
::v-deep .el-tree-node:focus > .el-tree-node__content {
    background-color: #e4f5ee !important;
    border-left: 4px solid #21af73 !important;
}
/* 高亮 */
::v-deep .el-tree-node.is-current > .el-tree-node__content {
    background-color: #e4f5ee !important;
    border-left: 4px solid #21af73 !important;
}

/*  */
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
/* 每个节点后面内容样式 */
.custom-tree-node-span {
    width: 30px;
    height: 30px;
    background-color: #21af73;
    color: #ffffff;
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
}
</style>