Vue Element-ui实现树形控件节点添加图标详解
2021-11-28 04:06
543 查看
目录
1.效果图
2.树形表格绑定数据加标签
想要在树形控件的树节点加上图片或者element-ui的图标,可以在树形表格绑定数据中加上标签icon
children: [ { icon:'el-icon-top-right', label: ['beam名称',''], children: [ { label:['name','RS49'], }, { icon:'src/assets/images/Organization.png', label:['group('+'3'+')',''] children:[ { label:['10600361','10950','11200','0'] } ] } ] } ],
在树形控件自定义函数中
直接让class等于element-ui的icon标签
img标签需要加上自己图片的地址
renderContent(h,{node,data,store}){ // div代表树形控件的一行,div中包含三个span标签 // 判断节点的label数组数量,通过三目运算来选择class // 设置class来控制树形控件进行对齐 return h('div',[ // 在树形控件自定义函数中增加icon和图片的标签 // img标签需要加上自己图片的地址 h('span',{class:'top-right'}), h('img',{src:data.icon}), h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]), h('span', {class:'groupStyle'},node.label[1]), h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2]) ]); },
3.所有代码
<template> <div class="mytree"> <el-tree :data="tree_data" :props="defaultProps" @node-click="handleNodeClick" indent="0" :render-content="renderContent" ></el-tree> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ components: {}, data() { return { tree_data: [ { // type:1, label: 'notice-id1', children: [ { label: ['卫星名称代号','ZOHREH-2'], }, { label: ['组织机构','IRN'], }, { label: ['频率范围','10950-1450'], }, { icon:'el-icon-top-right', label: ['beam名称',''], children: [ { label:['name','RS49'], }, { label:['freq_min','10950'], }, { label:['freq_max','14500'], }, { icon:'src/assets/images/Organization.png', label:['group('+'3'+')',''] children:[ { label:['10600361','10950','11200','0'] }, { label:['10600361','10950','11200','0'] }, { label:['10600361','10950','11200','0'] } ] } ] }, ], }, ], defaultProps: { children: 'children', label: 'label', }, } }, method:{ // 自定义树形控件函数 node代表每个节点 renderContent(h,{node,data,store}){ // div代表树形控件的一行,div中包含三个span标签 // 判断节点的label数组数量,通过三目运算来选择class // 设置class来控制树形控件进行对齐 return h('div',[ // 在树形控件自定义函数中增加icon和图片的标签 h('span',{class:[data.icon,data.icon==='el-icon-top-right'? 'top-right':'bottom-left']}), h('img',{src:data.icon === 'src/assets/images/Organization.png' ? data.icon:''}), h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]), h('span', {class:'groupStyle'},node.label[1]), h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2]) ]); }, } }) </script> <style lang="scss" scoped> .nodeStyle{ width:110px; display:inline-block; text-align:left; } .groupStyle{ width:150px; display:inline-block; text-align:left; } </style>
其他实现
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
您可能感兴趣的文章:相关文章推荐
- [原创]vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
- vue elementUI tree树形控件获取父节点ID的实例
- vue中element-ui树形控件自定义节点,注意一下
- Jstree树形控件实现树形结构展示+自定义节点图标
- Element-ui中tree树形控件全选与取消全选的功能实现
- 详解vue-cli+element-ui树形表格(多级表格折腾小计)
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- vue+element UI实现树形表格带复选框的示例代码
- Vue + Element UI图片上传控件使用详解
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
- 给树形目录控件的节点添加图标
- vuedraggable+element ui实现页面控件拖拽排序效果
- vue+Element-ui实现分页效果实例代码详解
- vue2.0+Element-ui应用【Tree树形控件】
- Vue + ElementUI实现树形表格(表格树形数据)
- 详解如何实现Element树形控件Tree在懒加载模式下的动态更新
- vue+ElementUI实现订单页动态添加产品效果
- vue+elementUi 实现密码显示/隐藏+小图标变化功能
- element-ui避坑: el-tree控件中子节点未全部选中,提交树形数据时,父节点id没有选中并获取。
- 利用vue+elementUI实现部分引入组件的方法详解