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

最新推荐文章于 2025-03-28 16:28:27 发布
原创 最新推荐文章于 2025-03-28 16:28:27 发布
· 3.2k 阅读 · 5 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

直接上代码： 

<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,//在线数
					},
				],
				},
			],

 

el-tree自定义树节点的内容
weixin_44173929的博客
09-17 2207
需求：el-tree的第一级是假数据，不可以点击，也就是屏蔽node-click事件。 <template> <div> <el-tree :data="data" node-key="id" @node-click="handleNodeClick" > <span class="custom-tree-node" slo
element-ui-plus el-tree 树形结构如何自定义内容
学习笔记
03-29 3792
项目中遇到一个需要设置权限的地方，但目录和权限是放在一起的，这样就很不好区分类别，为了区分类别，就需要自定义树结构中每项的外观。
el-tree自定义节点内容
前端小菜鸟也有人起的博客
08-08 708
el-tree自定义节点内容
el-tree自定义内容
最新发布
m0_62508027的博客
03-28 477
自定义el-tree节点内容
el-tree 自定义节点样式
m0_73353407的博客
01-08 2960
el-tree 自定义节点样式
element-ui tree树形控件 自定义节点内容
热门推荐
yh8899abc的博客
06-12 2万+
首先上一个树形控件的HTML <el-tree :data="treeData" // 树形控件数据源 :props="defaultProps" // 树形控件的配置项 node-key="id" // 每个树节点对应的唯一标识符 highlight-current // 是否高亮 ref="tree" // ref标识符 :default-expanded-keys="expandKeys" //默认展开节点的key数组 @curr
element el-tree组件的动态加载、新增、更新节点的实现
10-15
需要注意的是，el-tree 组件还提供了一些其他有用的属性和方法来支持树形控件的操作，例如 :props 属性用于自定义节点中各个字段的 key，node-key 用于指定节点唯一标识的字段，以及 lazy 属性用于配置节点的懒加载...
vue el-tree 默认展开第一个节点的实现代码
10-15
根据提供的文件信息，关于“vue el-tree 默认展开第一个节点的实现代码”这一主题，我们可以梳理出以下知识点： 1. Vue.js与Element UI库：本文内容适用于使用Vue.js框架结合Element UI组件库的开发者。Element UI...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
本文将详细讲解如何在Element-ui的`el-tree`组件中实现这一功能。 首先，我们要理解`el-tree`的工作原理。`el-tree`是基于Vue.js构建的，它依赖Vue的数据绑定机制来更新视图。当数据源（通常是一个数组）发生变化时...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-tree 自定义节点内容及样式修改记录
TangAcrab的博客
12-05 2570
el-tree自定义节点内容和样式修改
Element-ui tree组件自定义节点使用方法代码详解
10-18
本文通过实例代码给大家介绍了Element-ui tree组件自定义节点使用方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Elementui el-tree 自定义节点内容、图标右移、修改某一节点对应背景色、展开或关闭所有节点等常用问题
小猫爪子
05-06 1万+
这里写目录标题去除子节点缩进自定义节点内容三角图标右移 去除子节点缩进 设置:indent="0" 自定义节点内容 使用slot，找到要修改neirong 的对应class，例如下面例子 el-tree-node、custom-tree-node，找到这些elementui自带的class，使用插槽进行修改。 三角图标右移 >>>.el-tree-node__expand-icon { position: absolute; right: 2%; } 例子 <temp.
使用el-tree自定义节点内容，更改节点内容时候只更改了最后添加的节点内容
m0_52244931的博客
12-10 1545
使用el-tree自定义节点内容，更改节点内容时候只更改了最后添加的节点内容
Element Tree组件，自定义节点，并设置事件
tuku0801的专栏
06-02 1381
使用 scoped slot添加子节点 z
自定义树组件
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
11-28 2036
element ui plus自定义树组件。
ElementUI 自定义el-tree node节点，表格展示节点信息
hrcsdn13的博客
07-15 410
ElementUI 自定义el-tree node节点，表格展示节点的某些信息
el-tree如何自定义节点样式
02-26
### 关于 `el-tree` 中自定义节点样式的解决方案 在 `el-tree` 组件中，可以通过多种方式来自定义节点样式。一种常见的方式是利用 scoped slot 来定制化渲染每个节点的内容，并通过 CSS 类来调整样式。 #### 使用 Scoped Slot 定制节点内容 借助 scoped slot 可以完全控制树节点的显示逻辑以及外观设计： ```html <template> <el-tree :data="data" :props="defaultProps"> <!-- 自定义节点模板 --> <template #default="{ node, data }"> <span class="custom-tree-node"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini">操作</el-button> </span> </span> </template> </el-tree> </template> <script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1' }] }], defaultProps: { children: 'children', label: 'label' } }; } }; </script> <style scoped> .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; } </style> ``` 上述代码展示了如何创建一个具有自定义按钮的操作区域，并且可以进一步修改 `.custom-tree-node` 的样式以适应具体需求[^3]。 #### 添加特定类名或内联样式 如果只需要简单地改变某些节点的颜色或其他基本属性，则可以直接给这些元素添加额外的类名或是使用 inline-style 属性来进行快速设置。例如，在上面的例子基础上增加条件判断为不同类型的节点赋予不同的背景颜色： ```javascript <span :class="[{'highlight': isImportant(data)}, 'node-label']">{{ node.label }}</span> ... methods: { isImportant(nodeData){ // 根据业务逻辑返回 true 或 false return nodeData.priority === "high"; } } ``` 配合相应的CSS规则: ```css .highlight{ background-color:#ffeb9c !important; /* 高亮 */ } .node-label{ color:green; } ``` 这种方法适用于那些不需要复杂交互逻辑的情况下的样式微调。 #### 动态绑定 style 对象 对于更复杂的场景下动态计算样式的需求，还可以考虑使用 Vue 提供的数据绑定特性——即通过对象形式传递给 `v-bind:style` 指令完成更加灵活多变的效果呈现： ```vue <!-- HTML部分 --> <span v-bind:style="getNodeStyle(data)">...</span> // JS部分 computed:{ getNodeStyle(){ return function(item){ let styles={}; if (item.type==='folder'){ Object.assign(styles,{fontWeight:'bold'}); } return styles; } } } ``` 这种方式允许基于数据模型实时更新视图层面上的表现特征，非常适合处理依赖于运行时状态变化而产生的视觉反馈问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

甜甜凉白开

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

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

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

打赏作者

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

抵扣说明：

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

余额充值