Vue Element-ui实现树形控件节点添加图标详解
更新时间：2021年11月23日 15:57:05 作者：一只小木头.
这篇文章主要为大家介绍了Element-ui实现树形控件节点添加图标，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
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开发项目的时候,很多使用会import很多模块,这篇文章主要给大家介绍了关于vue中import导入三种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
动态绑定是我们日常开发中经常遇到的一个需求，下面这篇文章主要给大家介绍了关于vue动态绑定图标的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了vue-cli3.0使用及部分配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue使用highcharts自定义图例点击事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vuejs第八篇之Vuejs组件的定义实例解析的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了Vue源码解析之数据响应系统的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue-devtools安装使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本文主要介绍了vue中给路径起别名的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue3+vite引入插件unplugin-auto-import的方法
这篇文章主要介绍了vue3+vite引入插件unplugin-auto-import的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue实现验证码输入交互的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
最新评论