vue中给element树结构的节点添加单击事件,控制弹框的开启和关闭
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
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>
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)