例:
html代码
<div style="display:none">
<el-popover
placement="right-start"
popper-class="popper"
v-if="showPop"
ref="pop"
:reference='reference'
trigger="click"
width="200">
<div class="status_box">
...
</div>
</el-popover>
</div>
<div :key="index" class="pagecontent_block" v-for="(item,index) in tableData">
<div :ref="'bt'+item"
class="status"
@click="clickPop(item)"
>{{statusData.data[item.status].text}}</div>
</div>
注:el-popover标签放在display:none的div中,不会对其他控件布局造成影响。且el-popover标签需放置在v-for的div外层,保证仅一个el-popover。
data结构体
data() {
return {
activeId : -1,
reference:{},
showPop:false,
}
},
js方法
clickPop( item){
if (this.activeId === item && this.showPop )return;
this.showPop = false;
this.activeId = item;
// 因为reference是需要获取dom的引用 所以需要是$el
this.reference = this.$refs['bt'+item][0];
this.$nextTick(() => {
// 等待显示的popover销毁后再 重新渲染新的popover
this.showPop = true;
this.$nextTick(() => {
// 此时才能获取refs引用
this.$refs.pop.doShow();
})
})
},