vue ElementUi Tree效果 展开、收起、查询

<el-row>
	<el-col :span="14">
		<el-form @submit.native.prevent>
			<el-input size="medium" v-model.trim="aside.search.address" clearable placeholder="请输入设备位置" @keyup.enter.native="asideSearch"></el-input>
		</el-form>
	</el-col>
	<el-col :span="10">
		<el-button type="primary" size="medium" @click="asideSearch" style="margin-left:40px" >查 询</el-button>
	</el-col>
</el-row>
<div class="aside-tree-auto">
	<el-tree
		ref="asideTree"		//锚点
		v-loading="aside.loading"  //动态数据加载效果
		:data="aside.treeData"	 //tree数据
		:props="aside.defaultProps"		//
		:highlight-current="aside.highlight"  //是否高亮当前选中节点，默认值是 false
		@node-click="handleNodeClick"	//点击tree节点  [展开与闭合都触发]
		:default-expand-all="aside.circleOrRemove"   //展开闭合
		:filter-node-method="filtertreeNode"	//模糊查询
		element-loading-background="rgba(255,255,255,1)"	//loading背景颜色
		>
		
		<!--
		备注:    
			@node-click=""  //点击树节点  节点打开闭合都触发
			@node-expand=""  //点击树节点  节点展开时触发  
			所以如果点击树节点后有业务建议上述该方法改为 node-expand  
		-->
		<!--此处代码实现的作用是针对于tree子项显示不同的icon图标，根据其点击每条数据的内部字段是来判断-->
			<span class="custom-tree-node" slot-scope="{node,data}">
		     <span v-if="data.imei" :class="(videoContainer.arrAll.filter(v=>v == data.id)).length>0?'disabledTree':''">
		       <i class="el-icon-s-promotion" style="color:#fc0000;margin-right:5px;font-size:20px"></i>
					 {{data.label}}
		     </span>
				 <span v-else>
					 <i class="el-icon-s-data" style="color:#4683c4;margin-right:5px;font-size:15px"></i>{{ data.label }}
				 </span> 
		  </span>
	</el-tree>
</div>

data(){
	return{
		aside:{
			loading:false,
			highlight:true,
			circleOrRemove:true,
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			search:{
				address:'',
			}
		}
	}
}

//方法：
methods: {
	//tree点击的当前数据
	handleNodeClick(row){
		
	};
	//tree全部展开
	asideCircle(){
		if(_this.aside.circleOrRemove) return
		_this.aside.circleOrRemove = !_this.aside.circleOrRemove;
		_this.expandNodes(_this.$refs.asideTree.store.root)
	},
	
	//tree全部收起
	asideRemove(){
		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]);
			}
		}
	},

	//aside 查询
	asideSearch(){
		//如果检索内容为空停止
		if(!_this.aside.search.address) return;
		//去除检索条件中输入的空格
		_this.$refs.asideTree.filter((_this.aside.search.address).replace(/\s+/g,''))
	},
	
	//tree 检索
	filtertreeNode(value,data,node){
		if(!value) return true;
		return _this.findSearKey(node,value);
	},
	
	findSearKey(node,key){
		if (node.label.indexOf(key) !== -1) {
			return true;
		} else {
			if (node.parent.parent == null) {
				return false;
			} else {
				return this.findSearKey(node.parent, key);
			}
		}
	},


}

效果图如下：