Element-UI实现Tree 树形控件节点添加图标

Element-UI实现Tree 树形控件节点添加图标：

属于自定义节点内容，可以通过两种方法进行树节点内容的自定义：render-content 和 scoped slot。

1、scoped slot 实现在节点区添加图标

传入两个参数 node 和 data ，分别表示当前节点的 Node 对象和当前节点的数据

<template>
<div><el-tree :data="data" :props="defaultProps" default-expand-all><span slot-scope="{ node, data }"><i :class="data.icon"></i><span style="padding-left: 4px;">{{node.label}}</span></span></el-tree>
</div>
</template><script>
var menus = [{'menuId': 1,'menuName': '系统管理','icon': 'el-icon-menu','children': [{'menuId': 100,'menuName': '用户管理','icon': 'el-icon-menu','children': [{'menuId': 1000,'menuName': '用户查询','icon': 'el-icon-document'},{'menuId': 1001,'menuName': '用户新增','icon': 'el-icon-document'},{'menuId': 1002,'menuName': '用户修改','icon': 'el-icon-document'},{'menuId': 1003,'menuName': '用户删除','icon': 'el-icon-document'}]},{'menuId': 101,'menuName': '角色管理','icon': 'el-icon-menu','children': [{'menuId': 1006,'menuName': '角色查询','icon': 'el-icon-document'},{'menuId': 1007,'menuName': '角色新增','icon': 'el-icon-document'},{'menuId': 1008,'menuName': '角色修改','icon': 'el-icon-document'},{'menuId': 1011,'menuName': '删除角色','icon': 'el-icon-document'}]}]}
];
export default {name: 'tree',data () {return {data: menus,defaultProps: {children: 'children',label: 'menuName'}};},methods: {}
};
</script><style scoped></style>

2、render-content 实现在节点区添加图标

<template>
<div><el-tree :data="data" :props="defaultProps" default-expand-all:render-content="renderContent"></el-tree>
</div>
</template><script>
var menus = [{'menuId': 1,'menuName': '系统管理','icon': 'el-icon-menu','children': [{'menuId': 100,'menuName': '用户管理','icon': 'el-icon-menu','children': [{'menuId': 1000,'menuName': '用户查询','icon': 'el-icon-document'},{'menuId': 1001,'menuName': '用户新增','icon': 'el-icon-document'},{'menuId': 1002,'menuName': '用户修改','icon': 'el-icon-document'},{'menuId': 1003,'menuName': '用户删除','icon': 'el-icon-document'}]},{'menuId': 101,'menuName': '角色管理','icon': 'el-icon-menu','children': [{'menuId': 1006,'menuName': '角色查询','icon': 'el-icon-document'},{'menuId': 1007,'menuName': '角色新增','icon': 'el-icon-document'},{'menuId': 1008,'menuName': '角色修改','icon': 'el-icon-document'},{'menuId': 1011,'menuName': '删除角色','icon': 'el-icon-document'}]}]}
];
export default {name: 'tree',data () {return {data: menus,defaultProps: {children: 'children',label: 'menuName'}};},methods: {renderContent: function (h, {node, data, store}) {return (<span><i class={data.icon}></i><span style="padding-left: 4px;">{node.label}</span></span>);}}
};
</script><style scoped></style>

Element-UI实现Tree 树形控件节点添加图标相关推荐

Element-ui实现树形控件节点添加图标
1.效果图 2.树形表格绑定数据加标签想要在树形控件的树节点加上图片或者element-ui的图标,可以在树形表格绑定数据中加上标签icon children: [{icon:'el-icon-to ...
elementui tree获取父节点_vue_elementUI_ tree树形控件获取选中的父节点ID
一, vue_elementUI_ tree树形控件 1.1默认点击tree节点的第一个(注意不是checked选中) :expand-on-click-node="false" ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来 ...
React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件一.Tree 树形结构二.使用案例三.API 使用指南四.源代码五.总结一.Tree 树形结构组件说明: 实现树形控件,适用于组织架构.文章列表 ...
《实用VC编程之玩转控件》第15课：Tree树形控件
本文转载自:VC驿站 https://www.cctry.com/thread-297465-1-1.html 1.控件简介: Tree树形控件也是我们编程过程中比较常用的一个控件,而且在其他软件中也 ...

Element-UI实现Tree 树形控件节点添加图标

1、scoped slot 实现在节点区添加图标

2、render-content 实现在节点区添加图标

Element-UI实现Tree 树形控件节点添加图标相关推荐

最新文章

热门文章