Elementui el-tree 自定义节点内容、图标右移、修改某一节点对应背景色、展开或关闭所有节点等常用问题

忘是亡心i 2023-01-18 13:28 8阅读 0赞

### 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，可以自己设置各种图标、怎么显示等问题！！超级好用呜呜呜

<el-tree 
    	ref="tree"
    	:data="navData" 
    	:props="defaultProps" 
    	@node-click="handleNodeClick" 
    	:indent="18"
    	node-key="id"
    	:accordion="true">
    	
    	
    	<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>
    		
    		<el-tree 
    			ref="tree"
    			:data="navData" 
    			:props="defaultProps" 
    			@node-click="handleNodeClick" 
    			:indent="18"
    			node-key="id"
    			:accordion="true">
    			
    			
    			<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

后续开辟什么新领域再继续补充(*╹▽╹*)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221021/86faa864213d40e0aa88b4307215221d.png