vue中给element树结构的节点添加单击事件,控制弹框的开启和关闭

例子:

1、给树结构的叶子节点添加点击事件**@node-click=“handleNodeClick”;**

2、**点击功能控制popover弹框的开启和关闭:**弹框里面的数据是通过调后台动态获取的,如果点击叶子节点的id和上一次id是同一个,则通过弹框值visible取反来开启关闭弹框,如果当前id和上一次id不是同一个,则获取当前id的弹框对应的内容

<el-tree class="filter-tree" 
	:data="treeList" 
	:props="defaultProps" 
	default-expand-all 
	highlight-current
	:filter-node-method="filterNode"
	ref="tree" 
	@node-click="handleNodeClick">
</el-tree>
<el-popover placement="bottom"  trigger="manual" v-model="visible" popper-class="tree_2"> 
    <div class="basisInfo_">设备编码:{{staticParameterList.anticode}}</div>
</el-popover>
<script>
let treeId;
export default {
    data(){
    visible=false
    },
    methods:{
	 handleNodeClick(data,node,obj){
	 	//如果是叶子节点
		if(node.isLeaf){
			//如果点击叶子节点的id和上一次id是同一个,则通过弹框值visible取反来开启关闭弹框
			//这里要注意:开始第一次点击的时候,treeId没有值,则直接进入else里面的逻辑
			if(treeId==data.id){
				this.visible=!this.visible
			}else{
			//否则,显示当前弹框内容
				this.visible=true;
				treeId=data.id
			}
		}
	}
}
</script>
Logo

前往低代码交流专区

更多推荐