vue中给element树结构的节点添加单击事件,控制弹框的开启和关闭
vue中给element树结构的节点添加单击事件,控制弹框的开启和关闭例子:1、给树结构的叶子节点添加点击事件**@node-click=“handleNodeClick”;**2、**点击功能控制popover弹框的开启和关闭:**弹框里面的数据是通过调后台动态获取的,如果点击叶子节点的id和上一次id是同一个,则通过弹框值visible取反来开启关闭弹框,如果当前id和上一次id不是同一个,则
·
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>
更多推荐
已为社区贡献2条内容
所有评论(0)