组件中有个弹窗el-popover,这个弹窗里面又引入弹窗el-popover,这样相当于是popover嵌套,导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭,就是这样
解决方法:
popover内部嵌套popover的方法,在外层popover的内容上添加click事件(注意是否需要.native),用this.$refs.XXX.doClose()方法关闭,同时触发内部popover的reference,需要添加click事件阻止事件冒泡,两者缺一不可(不阻止事件冒泡,就会造成内部popover打不开–实际上是打开了又关掉了)
直接上代码
<el-table-column label="状态" width="180">
<template slot-scope="scope">
<div class="num">
<el-popover
placement="bottom"
width="180"
trigger="click">
<div style=" border-bottom:1px solid #000;margin-bottom:5px" @click="tableTwoPopoverClick(scope.row)">
<div class="status-item" v-for="(item,index) of statuslist" :key="index">
<el-popover
placement="bottom-start"
trigger="click"
:ref="`Pop${scope.row.id}`"
@show="handleStatusWarn(scope.row,index)">
<div class="ColorBox">
<div class="ColorBoxItem">1</div>
<div class="ColorBoxItem">2</div>
<div class="ColorBoxItem">3</div>
</div>
<div slot="reference">
<div class="monday-style-clickable" >
<div class="color-option-box" :style="`margin-bottom:10px;background-color:${item.color}`">
**
</div>
</div>
</div>
</el-popover>
</div>
</div>
<div slot="reference">
<div>{{scope.row.name }}</div>
</div>
</el-popover>
</div>
</template>
</el-table-column>
//关闭其他popover
//给嵌套的子el-popover加ref,这样就能找到子popover。获取所有循环出来的el-popover,如果这个el-popover的索引值和当前弹出的索引值相同,则不关闭,否则关闭弹窗
handleStatusWarn(val,index){
var e =window.event || arguments.callee.caller.arguments[0];
e.stopPropagation();
let eleList = this.$refs[`Pop${val.id}`]
eleList.forEach((i,j)=>{
if(j != index){
i.doClose()
}
})
},
//点击其他地方,popover消失,如果不写点击页面的其他地方,弹窗不会消失
tableTwoPopoverClick(val){
let eleList = this.$refs[`Pop${val.id}`]
eleList.forEach((i,j)=>{
i.doClose()
})
}
修改后