element ui中自定义树形控件

树形控件,原有的形式也许不能满足用户需求,需要自定义

 <el-tree :data="title" node-key="id" default-expand-all :expand-on-click-node="false" :props="defaultProps2">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span>
                                <el-button type="text" size="mini" @click="addNodeRight(data)" v-show="data.type == 1" style="padding:0">
                                [添加子节点]
                                </el-button>
                                <el-button type="text" size="mini" @click="editNode(node, data)" style="padding:0">
                                [编辑节点]
                                </el-button>
                                <el-button type="text" size="mini" @click="remove(data)" style="padding:0">
                                [删除节点]
                                </el-button>
                           </span>
                        </span>
                    </el-tree>

上面代码可以实现出下图效果


1534323430(1).png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,288评论 25 708
  • 努力了七年,你还是没能喜欢我。 感谢你的一路陪伴,也感谢你为我的人生去掉一个错误答案,我相信对的那个人一定还在未来等我。
    纤月苍龙曦阅读 109评论 0 0
  • 文/素以如梦 甘棠 ----国风&召南 蔽芾(fèi)甘棠, 勿翦勿伐, 召(Shào)伯所茇(bá)。 蔽芾甘棠...
    素以如梦阅读 285评论 0 2
  • 晚上教露露学英语,因为一直以来都不是很用心的交作业,所以这次想尽快完成,以后有个好习惯,刚开始教了两遍,觉得她掌握...
    沙汀渔火阅读 312评论 0 0