elementUI 自定义树节点的内容 elementtree修改节点属性

转载

mob64ca14010a69 2024-04-25 22:27:14

文章标签 elementUI 自定义树节点的内容 vue elementui ico 二级 文章分类 机器学习人工智能

el-tree的使用

默认展开某节点
默认选中左侧导航某节点
默认关闭所有展开节点（不展开任何节点）
去除子节点缩进
自定义节点内容、设置某一节点对应的背景色
三角图标右移/收缩、展开样式改变
完整代码和效果图

默认展开某节点

设置node-key="id":default-expanded-keys="nodeKey" nodeKey是数组，传入要展开节点对应的id

this.nodeKey.push(data[0].id);

默认选中左侧导航某节点

node-key="id":default-expanded-keys="nodeKey" 设置setCurrentKey，传入要选择节点的id

this.$nextTick(() => {
	this.$refs.tree.setCurrentKey(this.nodeKey[0])
})

默认关闭所有展开节点（不展开任何节点）

应用场景：点击某一按钮，关闭所有已展开节点。

通过ref找到节点的store属性获取所有节点的集合数组nodesMap

for(let key in this.$refs.tree.store.nodesMap) {
	this.$refs.tree.store.nodesMap[key].expanded = false
}

去除子节点缩进

设置:indent="0"

自定义节点内容、设置某一节点对应的背景色

使用slot，找到要修改内容对应的class，（F12查找）例如下面例子 el-tree-node、custom-tree-node，找到这些elementui自带的class，使用插槽进行修改。我这里主要想在标题右侧显示对应的条数和设置某个节点的背景颜色，slot完美解决。
使用slot，可以自己设置各种图标、怎么显示等问题！！超级好用呜呜呜

<!-- indent:相邻级节点间的水平缩进，单位为像素 -->
<el-tree 
	ref="tree"
	:data="navData" 
	:props="defaultProps" 
	@node-click="handleNodeClick" 
	:indent="18"
	node-key="id"
	:accordion="true">
	<!-- 
	:render-content="renderContent" 
	:highlight-current="true"
	:default-expanded-keys="nodeKey"
	-->
	<!-- 自定义节点内容 -->
	<div class=" el-tree-node"  slot-scope="{ node, data }" style="margin-bottom: 10px;">
		<div v-if="node.level == 1">
			<!-- 父标题样式 -->
			<div class=" el-tree-node__content" style="background: #fff;color: #333333">
				<span class="custom-tree-node">
					<span>
						<img width="18px" height="18px" class="vertical-align" src="../../../../public/img/assetCatalogue/icon-title.png" alt="">
						<span class="vertical-align" style="margin-left:10px;text-align: left;width: 105px;display: inline-block;">
							{{ node.label}}
						</span>
						<span class="vertical-align" style="text-align: right;">
							{{data.dataNum}}
						</span>
					</span>
				</span>
			</div>
		</div>
		<div v-else>
			<div class=" el-tree-node__content">
				<span class="custom-tree-node">
					<span style="margin-left: 10px;">
						<span style="text-align: left;width: 105px;display: inline-block;">
							{{ node.label}}
						</span>
						<span style="text-align: right;">
							{{data.dataNum}}
						</span>
					</span>
				</span>
			</div>
		</div>
	</div>
</el-tree>

三角图标右移/收缩、展开样式改变

>>>.el-tree-node__expand-icon {
	position: absolute;
	right: 2%;
}

完整代码和效果图

<template>
	<el-row class="asset-catalogue-nav">
		<el-row>
			<div class="data-theme point-click" @click="changeTreeNodeStatus()">
				<img class="float-left" style="margin-right: 10px;margin-top: 7px;" src="../../../../public/img/assetCatalogue/icon-theme.png" alt="">
				<div class="float-left">数据主题</div>
				<div class="float-right one-overflow" style="width: 60px;text-align: right;">{{countData}}</div>
			</div>
		</el-row>
		<!-- indent:相邻级节点间的水平缩进，单位为像素 -->
		<el-tree 
			ref="tree"
			:data="navData" 
			:props="defaultProps" 
			@node-click="handleNodeClick" 
			:indent="18"
			node-key="id"
			:accordion="true">
			<!-- 
			:render-content="renderContent" 
			:highlight-current="true"
			:default-expanded-keys="nodeKey"
			-->
			<!-- 自定义节点内容 -->
			<div class=" el-tree-node"  slot-scope="{ node, data }" style="margin-bottom: 10px;">
				<div v-if="node.level == 1">
					<!-- 父标题样式 -->
					<div class=" el-tree-node__content" style="background: #fff;color: #333333">
						<span class="custom-tree-node">
							<span>
								<img width="18px" height="18px" class="vertical-align" src="../../../../public/img/assetCatalogue/icon-title.png" alt="">
								<span class="vertical-align" style="margin-left:10px;text-align: left;width: 105px;display: inline-block;">
									{{ node.label}}
								</span>
								<span class="vertical-align" style="text-align: right;">
									{{data.dataNum}}
								</span>
							</span>
						</span>
					</div>
				</div>
				<div v-else>
					<div class=" el-tree-node__content">
						<span class="custom-tree-node">
							<span style="margin-left: 10px;">
								<span style="text-align: left;width: 105px;display: inline-block;">
									{{ node.label}}
								</span>
								<span style="text-align: right;">
									{{data.dataNum}}
								</span>
							</span>
						</span>
					</div>
				</div>
			</div>
		</el-tree>
	</el-row>
</template>
<script>
//此处省略写
data: [{
	label: '一级 1',
	children: [{
		label: '二级 1-1'
	}]
}, {
	label: '一级 2',
	children: [{
		label: '二级 2-1'
	}, {
		label: '二级 2-2'
	}]
}, {
	label: '一级 3',
	children: [{
		label: '二级 3-1'
	}, {
		label: '二级 3-2'
	}]
}],
defaultProps: {
	children: 'children',
	label: 'label'
}
</script>
<style lang="scss" scoped>
	.asset-catalogue-nav {
		margin-top: 10px;
		
		/* 小三角图标右移 */
		>>>.el-tree-node__expand-icon {
			position: absolute;
			right: 2%;
			font-size: 18px;
		}
		
		// 鼠标hover悬浮背景色
		>>>.el-tree-node__content{
		  display: block; //默认使用flex布局 此处需要设置父标题背景颜色因此改为block
		  height: 40px;
		  line-height: 40px;
		  &:hover{
		    color: #1067EE;
			background-color: #F6F7FB;
		  }
		}
		
		/* 点击树结构项的选中颜色 */
		>>> .el-tree-node.is-current>.el-tree-node__content {
			color: #1067EE;
			background-color: #F6F7FB;
		}
		/* 拖拽时失焦节点颜色 */
		>>> .el-tree-node:focus > .el-tree-node__content {
			color: #063972 ;
			background-color: #F5F5F5;
		}
		
		/* 三角图标 收缩 */
		>>> .el-tree-node__content>.el-tree-node__expand-icon {
		    margin-top: 5px;
			-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}
		/* 三角图标 展开 */
		>>> .el-tree-node__content>.el-tree-node__expand-icon.expanded {
		    -webkit-transform: rotate(90deg);
		    transform: rotate(90deg);
		}
	}
	.data-theme {
		background-color:#F6F7FB;
		color: #1067EE;
		font-size: 20px;
		height: 40px;
		line-height: 40px;
		padding-right: 10px;
		border-radius: 3px 3px 0px 0px;
	}
</style>

elementUI 自定义树节点的内容 elementtree修改节点属性_elementUI 自定义树节点的内容