elementUi树结构,tree功能,展开与合并

<el-tree
	ref="asideTree"
	v-loading="aside.loading"  
	:data="aside.treeData"
	:props="aside.defaultProps"
	:highlight-current="aside.highlight"
	@node-click="handleNodeClick"
	:default-expand-all="aside.circleOrRemove"
	element-loading-background="rgba(0,0,0,.5)"
	>
	
	<!-- highlight-current  点击行高亮 -->
	<!-- node-click 点击树 -->
	<!-- default-expand-all 展开与收起-->
	
		<span class="custom-tree-node" slot-scope="{node,data}">
		<!-- :class="(videoContainer.arrAll.filter(v=>v == data.id)).length>0?'disabledTree':'' 该处的功能,将点击的每一行的id存储起来,用于标记显示已经打开了哪个设备-->
	     <span v-if="data.imei" style="display:flex;align-items:center" :class="(videoContainer.arrAll.filter(v=>v == data.id)).length>0?'disabledTree':''">
	       <i class="iconfont icon-a-18Fshexiangji" style="color:#f1fc12;margin-right:5px;font-size:15px"></i>
				 {{data.label}}
	     </span>
			 <span v-else-if="data.id == '1'" style="display:flex;align-items:center;color:#1aff00;font-size:15px">
			 		<i class="el-icon-s-home" style="color:#1aff00;margin-right:5px;font-size:18px"></i>{{ data.label }}
			 </span> 
			 <span v-else-if="data.label =='电动车' || data.label =='堆物堆料' || data.label =='消防通道' || data.label =='火眼'" style="display:flex;align-items:center;color:#ffb613">
				 <i class="el-icon-s-promotion" style="color:#ffb000;margin-right:5px;font-size:15px"></i>{{ data.label }}
			 </span> 
			 <span v-else style="display:flex;align-items:center">
			 		<i class="el-icon-s-data" style="color:#ecf5ff;margin-right:5px;font-size:15px"></i>{{ data.label }}
			 </span> 
	  </span>
</el-tree>
mounted(){
	//全部展开
	asideCircle(){
		//如果当前是展开则停止
		if(_this.aside.circleOrRemove) return
		_this.aside.circleOrRemove = !_this.aside.circleOrRemove;
		_this.expandNodes(_this.$refs.asideTree.store.root)
	},
	//全部收起
	expandNodes(){
		if(!_this.aside.circleOrRemove) return
		_this.aside.circleOrRemove = !_this.aside.circleOrRemove;
		_this.expandNodes(_this.$refs.asideTree.store.root)
	},
	//遍历属性数据,设置每一项的expanded属性,实现展开收起
	expandNodes(node){
		node.expanded = _this.aside.circleOrRemove;
		for(let i = 0; i<node.childNodes.length; i++){
			node.childNodes[i].expanded = _this.aside.circleOrRemove;
			if(node.childNodes[i].childNodes.length > 0){
				_this.expandNodes(node.childNodes[i]);
			}
		}
	},
}

图片示例
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值