elementui 组件Popover弹出框点击内容区关闭弹出框的解决办法

需求：点击图标显示选项，选中某一图标隐藏内容区。

• 官方给的关闭方法是通过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() 
},