elementUI tree能添加tag功能么，比如显示树下资源的数量

Question

bootstrap treeview能在tree上显示tag，请问这个element的tree怎么实现呢？

Answer 1

element UI 上的 tree 没有直接提供这样的功能 , 可以自己把 "自定义节点内容" 改一下就可以了; num是后面的标数

<div class="block">
        <p>使用 scoped slot</p>
        <el-tree :data="data5" default-expand-all>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                                <a class="my-badge">{{data.num}}</a>
                        </span>
                </span>
        </el-tree>
</div>

data() {
        return {
                data5: [{
                        id: 1,
                        label: '一级 1',
                        num: 10,
                        children: [{
                                id: 4,
                                label: '二级 1-1',
                                num: 1,
                                children: [{
                                        id: 9,
                                        num: 0,
                                        label: '三级 1-1-1'
                                }, {
                                        id: 10,
                                        num: 5,
                                        label: '三级 1-1-2'
                                }]
                        }]
                }, {
                        id: 2,
                        label: '一级 2',
                        num: 0,
                        children: [{
                                id: 5,
                                num: 30,
                                label: '二级 2-1'
                        }, {
                                id: 6,
                                num: 0,
                                label: '二级 2-2'
                        }]
                }, {
                        id: 3,
                        num: 0,
                        label: '一级 3',
                        children: [{
                                id: 7,
                                num: 0,
                                label: '二级 3-1'
                        }, {
                                id: 8,
                                num: 0,
                                label: '二级 3-2'
                        }]
                }]
        }
}

<style scoped>
    .block{
        width: 230px;
    }
    .my-badge {
        color: #fff;
        background: #99a9bf;
        padding: 3px 8px;
        font-size: 12px;
        line-height: 12px;
        border-radius: 20px;
        text-align: center;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>