q平面人
2019-01-27 13:19
采纳率: 100%
浏览 2.3k
已采纳

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

bootstrap treeview能在tree上显示tag,请问这个element的tree怎么实现呢?
图片说明

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 妖王令剑 2019-01-28 09:15
    已采纳

    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>
    
    
    已采纳该答案
    评论
    解决 2 无用
    打赏 举报
  • 檀小泡泡 2019-05-20 11:31

    @妖王令剑兄台,"自定义节点内容"是怎么实现的?最近在做一个类似的功能,可否看一下代码,感谢感谢

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题