需求:点击图标显示选项,选中某一图标隐藏内容区。
- 官方给的关闭方法是通过
v-model
设置显示或隐藏。
- 示例:
<el-popover
placement="top"
width="160"
v-model="visible">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible = false">确定</el-button>
</div>
<el-button slot="reference">删除</el-button>
</el-popover>
<script>
export default {
data() {
return {
visible: false,
};
}
}
</script>
- 我这里的需求是循环生成,通过绑定ref来控制显隐。(代码简写)
this.$refs[`popover-${index}`][0].doClose()
<el-row v-for="(item,index) in table" :key="index">
<el-col :span="2" :offset="1" class="position-2">
<el-popover placement="bottom" width="280" trigger="click" :ref="'popover-' + index">
<el-row>
<el-col :span="6">
<el-row class="display-center">
<img class="point-click" @click="changJoin(1,index)" width="30px"
src="../../../../public/img/datatools/2-A.png" alt="">
</el-row>
<el-row class="text-center">内连接</el-row>
</el-col>
<el-col :span="6">
<el-row class="display-center">
<img class="point-click" @click="changJoin(2,index)" width="30px"
src="../../../../public/img/datatools/2-B.png" alt="">
</el-row>
<el-row class="text-center">左连接</el-row>
</el-col>
<el-col :span="6">
<el-row class="display-center">
<img class="point-click" @click="changJoin(3,index)" width="30px"
src="../../../../public/img/datatools/2-C.png" alt="">
</el-row>
<el-row class="text-center">右连接</el-row>
</el-col>
<el-col :span="6">
<el-row class="display-center">
<img class="point-click" @click="changJoin(4,index)" width="30px"
src="../../../../public/img/datatools/2-D.png" alt="">
</el-row>
<el-row class="text-center">全连接</el-row>
</el-col>
</el-row>
<div slot="reference" class="point-click">
<img width="30px" src="../../../../public/img/datatools/2-A.png" alt="">
</div>
</el-popover>
</el-col>
</el-row>
//控制关闭
changJoin(id,index) {
console.log(this.$refs[`popover-${index}`])
this.$refs[`popover-${index}`][0].doClose()
},