el-tree实现自定义节点内容

最新推荐文章于 2024-05-14 21:23:44 发布
最新推荐文章于 2024-05-14 21:23:44 发布
阅读量3k 收藏 5
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41877050/article/details/119891242
版权

直接上代码： 

<el-tree
					:data="treeData"
					show-checkbox
					node-key="id"
					:default-expand-all="true"
					:check-on-click-node="false"
					@check="setCarToList"
					:props="defaultProps"
					class="filter-tree"
					:filter-node-method="this.select==='1'?filterNode:filterNode1"
					ref="tree"
				>
				<span slot-scope="{ node, data }">
					<span>
						<template v-if="data.flag === 'car'">
							<template v-if="data.carInfo.zhuangtai === '在线'">
								<img src="@/assets/images/shouye/zaixian.png" alt="车辆图标" style="width:15px;height:15px;">
							</template>
							<template v-if="data.carInfo.zhuangtai === '离线'">
								<img src="@/assets/images/shouye/lixian.png" alt="车辆图标" style="width:15px;height:15px;">
							</template>
						</template>
						<template v-if="data.flag === 'dept'">
							<img src="@/assets/images/shouye/dept.png" alt="单位图标" style="width:15px;height:15px;">
						</template>
					</span>
					<span style="font-size:14px">{{ node.label }}</span>
					<template v-if="data.flag === 'dept'">
						<span style="font-size:14px">&nbsp;[{{ data.online }}/{{ data.total }}]</span>
					</template>
					<template v-if="data.flag === 'car'">
						<span style="font-size:14px">&nbsp;({{ data.sheng }}&nbsp;{{ data.carInfo.zhuangtai }})</span>
					</template>
				</span>
				</el-tree>

实现效果如下：

数据定义：

treeData: [
				{
				id: 1,
				label: "一级单位1",
				flag:"dept",
				total:10,//总数
				online:1,//在线数
				children: [
					{
					id: 4,
					label: "二级单位1-1" ,
					flag:"dept",
					total:10,//总数
					online:1,//在线数
					children: [
						{
						id: 9,
						label: "三级单位1-1-1" ,
						flag:"dept",
						total:10,//总数
						online:1,//在线数
						children: [
							{
							id: 12,
							label: "甘A34567",
							flag:"car",
							sheng:"甘肃省",
							shi:"",
							qu:"",
							carInfo: {
								startOff: true,
								cheliangid:64,
								cheliangmingcheng: "甘A34567",
								shishisudu: "10km/h",
								fuwuqishijian: "2021-08-05 09:10",
								shebeishijian: "2021-08-05 09:10",
								shebeibianma: "bfdddd",
								liuliangkahao: "1245682248",
								suoshukehu: "三级单位1-1-1",
								dianhuozhuangtai: "主电开",
								zonglicheng: "2000",
								dangrilicheng: "20",
								chezhuName: "张继科",
								chezhuPhone: "12345698451",
								anzhuangshijian: "2020-10-26",
								dangritangshu: "1",
								jingdu: "119.479321",
								weidu: "39.938574",
								shebeiIMIS: "wewwwwwww",
								beizhu: "wu",
								youliang1: "110",
								youliang2: "256",
								zongyouliang: "366",
								jiluyisudu: "10km/h",
								jiashiyuanName: "温顿瑟夫",
								jiashiyuanPhone: "123456789645",
								huichuanshijian: "",
								guoqishijian: "",
								wendu: "10",
								shidu: "23",
								baojing: "超速",
								zhuangtai: "在线",
								weizhi: "甘肃省兰州市城关区雁南街道雁滩路甘肃人防大厦西45米",
							},
							},
							{
							id: 14,
							label: "甘B45343",
							flag:"car",
							sheng:"甘肃省",
							shi:"",
							qu:"",
							carInfo: {
								startOff: true,
								cheliangid:65,
								cheliangmingcheng: "甘B45343",
								shishisudu: "10km/h",
								fuwuqishijian: "2021-08-05 09:10",
								shebeishijian: "2021-08-05 09:10",
								shebeibianma: "bfdddd",
								liuliangkahao: "1245682248",
								suoshukehu: "三级单位1-1-1",
								dianhuozhuangtai: "主电开",
								zonglicheng: "2000",
								dangrilicheng: "20",
								chezhuName: "张继科",
								chezhuPhone: "12345698451",
								anzhuangshijian: "2020-10-26",
								dangritangshu: "1",
								jingdu: "115.795795",
								weidu: "40.000893",
								shebeiIMIS: "wewwwwwww",
								beizhu: "wu",
								youliang1: "110",
								youliang2: "256",
								zongyouliang: "366",
								jiluyisudu: "10km/h",
								jiashiyuanName: "温顿瑟夫",
								jiashiyuanPhone: "123456789645",
								huichuanshijian: "",
								guoqishijian: "",
								wendu: "10",
								shidu: "23",
								baojing: "疲劳驾驶",
								zhuangtai: "在线",
								weizhi: "甘肃省兰州市城关区雁南街道雁滩路甘肃人防大厦西45米",
							},
							},
						],
						},
						{
						id: 10,
						label: "甘C34567",
						flag:"car",
						sheng:"甘肃省",
						shi:"",
						qu:"",
						carInfo: {
							startOff: true,
							cheliangid:66,
							cheliangmingcheng: "甘C34567",
							shishisudu: "10km/h",
							fuwuqishijian: "2021-08-05 09:10",
							shebeishijian: "2021-08-05 09:10",
							shebeibianma: "bfdddd",
							liuliangkahao: "1245682248",
							suoshukehu: "二级单位1-1",
							dianhuozhuangtai: "主电开",
							zonglicheng: "2000",
							dangrilicheng: "20",
							chezhuName: "张继科",
							chezhuPhone: "12345698451",
							anzhuangshijian: "2020-10-26",
							dangritangshu: "1",
							jingdu: "115.862836",
							weidu: "39.726753",
							shebeiIMIS: "wewwwwwww",
							beizhu: "wu",
							youliang1: "110",
							youliang2: "256",
							zongyouliang: "366",
							jiluyisudu: "10km/h",
							jiashiyuanName: "温顿瑟夫",
							jiashiyuanPhone: "123456789645",
							huichuanshijian: "",
							guoqishijian: "",
							wendu: "10",
							shidu: "23",
							baojing: "其他",
							zhuangtai: "在线",
							weizhi: "甘肃省兰州市城关区雁南街道雁滩路甘肃人防大厦西45米",
						},
						},
					],
					},
				],
				},
				{
				id: 2,
				label: "一级单位2",
				children: [
					{
					id: 5,
					label: "二级单位2-1",
					flag:"dept",
					total:10,//总数
					online:1,//在线数
					},
					{
					id: 6,
					label: "甘D45343",
					flag:"car",
						sheng:"甘肃省",
						shi:"",
						qu:"",
					carInfo: {
						startOff: true,
						cheliangid:67,
						cheliangmingcheng: "甘D45343",
						shishisudu: "10km/h",
						fuwuqishijian: "2021-08-05 09:10",
						shebeishijian: "2021-08-05 09:10",
						shebeibianma: "bfdddd",
						liuliangkahao: "1245682248",
						suoshukehu: "二级单位2-1",
						dianhuozhuangtai: "主电开",
						zonglicheng: "2000",
						dangrilicheng: "20",
						chezhuName: "张继科",
						chezhuPhone: "12345698451",
						anzhuangshijian: "2020-10-26",
						dangritangshu: "1",
						jingdu: "117.150433",
						weidu: "40.215925",
						shebeiIMIS: "wewwwwwww",
						beizhu: "wu",
						youliang1: "110",
						youliang2: "256",
						zongyouliang: "366",
						jiluyisudu: "10km/h",
						jiashiyuanName: "温顿瑟夫",
						jiashiyuanPhone: "123456789645",
						huichuanshijian: "",
						guoqishijian: "",
						wendu: "10",
						shidu: "23",
						baojing: "超速",
						zhuangtai: "离线",
						weizhi: "甘肃省兰州市城关区雁南街道雁滩路甘肃人防大厦西45米",
					},
					},
				],
				},
				{
				id: 11,
				label: "一级单位3",
				flag:"dept",
				total:10,//总数
				online:1,//在线数
				children: [
					{
					id: 7,
					label: "二级单位3-1",
					flag:"dept",
					total:10,//总数
					online:1,//在线数
					},
					{
					id: 8,
					label: "二级单位3-2",
					flag:"dept",
					total:10,//总数
					online:1,//在线数
					},
				],
				},
			],

 

甜甜凉白开
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【vue】el-tree的新增/编辑/删除节点
qq_39404437的博客
04-17 2235
关于树形结构的新增同级节点等四种操作，各种参数配置完全继承el-tree，本篇使用vue2 + element-ui。
element-ui-plus el-tree 树形结构如何自定义内容
03-29 1676
项目中遇到一个需要设置权限的地方，但目录和权限是放在一起的，这样就很不好区分类别，为了区分类别，就需要自定义树结构中每项的外观。
a-tree 节点自定义样式 slot=“custom“ slot-scope=“item“不起作用
最新发布
qq_47690349的博客
05-14 292
在使用a-tree时需要根据子节点的某个属性来展示不同样式，本来打算用rander渲染，结果发现a-tree好像不支持还是怎么，没起作用，之后网上搜索发现使用 slot=“custom” slot-scope=“item"结果还是一直报错，就想使用#default=”{ data }"结果还是没有用，最后想到用a-tree自带的title用,没想到还真可以，代码如下</a-tree>
vue 自定义el-tree
wangmj518的专栏
01-12 2251
el-tree可以通过两种方法进行树节点内容的自定义：render-content和 scoped slot。但我个人还是比较喜欢使用scoped slot，写起来习惯放到template里面了，写法也舒服。链接：https://www.jianshu.com/p/32f85873d8e1。商业转载请联系作者获得授权，非商业转载请注明出处。
ElementUI-tree拖拽功能与节点自定义
yjITcsdn的博客
11-06 1574
ElementUI-tree拖拽功能与节点自定义
element-ui 树形控件el-tree右键自定义菜单实现节点增删改
热门推荐
Luo_LA的博客
01-13 1万+
效果展示： 实现步骤： 展示树形文件夹 @node-contextmenu=“floderOption”：element-ui定义的右键点击事件 data为element-ui中自带的json格式的数据 <el-tree :data="data" draggable node-key="id" @node-contextmenu="floderOption"> <span class="custom-tree-node" slot-scope="{ node, data }"&g
elementUI里树形控件 自定义节点
notagoodwriter的博客
06-06 391
他原本的这个节点还是很好用的点击。比如我想做成上图这样 代码如下。来一个插槽 即可 后方的则是。
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
element-ui tree结构实现增删改自定义功能代码
01-21
<el id=userMtree ref=tree data=treeData node-key=id render-content=renderContent expand-on-click-node=false node-click=nodeClick default-expanded-keys='expandedKey'></el> 下面是js部分 export...
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
el-tree控件的后台数据结构生成和方法抽取是实现动态加载、异步数据加载以及树状数据操作的关键。 首先，让我们深入理解el-tree的数据结构。在Element UI中，el-tree控件需要的数据结构通常是一个包含多个对象的...
Vue+ElementUI之Tree的使用
CnNoter
03-15 1112
Vue+ElementUI之Tree的使用 前端代码 <template> <div> <el-dialog title="终端通讯录" :visible.sync="isOpen" class="el-dialog-mini"> <div class="forms-menu-con"> ...
el-tree在label文字前加自定义图标或者图片
Anyuegogogo的博客
09-17 1244
<el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <img class="organization-img" src="@/assets/correction/orga
el-tree 点击父节点展示全部，点击子节点显示对应数据
xiaoming4965的博客
01-17 1643
el-tree 点击父节点展
el-tree 树增加全选按钮、点击文字时选中多选框
qq_28586135的博客
11-14 5894
el-tree 树增加全选按钮、点击文字时选中多选框
Element-UI框架的使用（四）-- Tree树形控件
weixin_57246557的博客
08-16 2259
Tree 树形控件 Element-UI: Tree 树形控件 用清晰的层级结构展示信息，可展开或折叠。 一、 基本使用 代码结构 <!-- data 要展示的数据(Array) --> <!-- props 配置选项(Object) --> <!-- node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、 节点对应的 Node、节点组件本身。 --> <el-tree :data="data" :props
自定义element-UI 节点树的数据（向后台数据填自己需要的内容）
macangyewangs的博客
05-29 709
HTML <template> <el-tree :data="treedatas" :props="defaultProps" ></el-tree> </template> script export default { data() { return { treedatas: [], defaultProps: { children: 'children', label:
element树组件自定义图标、字体大小高亮以及竖线设置
behance的博客
06-28 4224
如果只使用一种图标就可以直接用另一种。
自定义el-tree复选框选中状态vue elementUI
00年女程序员分享自己的学习笔记
12-07 6524
父节点展开状态，实现选中父节点只选中其第一级子节点，并且要把父节点从所有已经选中的节点中删除，即只保留子节点。父节点折叠状态，实现只选中父节点，不选中其子节点。
el-tree 父子节点自定义不同的图标
06-07
您可以使用 `scoped-slot` 来自定义每个节点的图标。具体步骤如下： 1. 在 `el-tree` 中使用 `scoped-slot` 定义节点的 `icon` 属性，如下所示： ```html <el-tree :data="data"> <template slot-scope="{ node }"> <span :class="node.icon"></span> {{ node.label }} </template> </el-tree> ``` 2. 在每个节点中定义自己的 `icon` 属性，如下所示： ```javascript data: [ { label: '节点一', icon: 'el-icon-folder', children: [ { label: '子节点一', icon: 'el-icon-document' } ] } ] ``` 在这个例子中，父节点使用 `el-icon-folder` 作为图标，子节点使用 `el-icon-document` 作为图标。您可以根据自己的需要，使用不同的类名和图标来自定义每个节点的图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

甜甜凉白开

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值