vue3手动控制elementui的popover隐藏，触发popover隐藏

首先我使用的是vue3，element ui的popover有显示的效果，不能去改变他，popover有一个:visible属性，我们控制它就可以了，popover如下：

<el-popover placement="bottom" :visible="merchantPopoverRef" @hide="resetMerchantPopover" :width="700" trigger="click" content="">
	<template #reference>
		<el-input v-model="formTopRight.Merchant" placeholder="选择商户" :suffix-icon="Search" />
	</template>
	<!--弹出自定义内容-->
	<div class="custom-merchant-content-table">
		<!-- 需要弹出的选择表格 -->
						<el-table :data="merchantJsonData" @row-click="merchantRowGetData">
						    <el-table-column width="300" />
						    <el-table-column width="300" />
						</el-table>
	</div>
</el-popover>

visible使用一个merchantPopoverRef来控制，这个变量初始化时必须为ref(null)，不然popover就不会显示了。
我使用的是在表格单击行时关闭popover，很简单，就是将visible设置为false就可以了，不过，设置为了false，后面就没办法弹出popover，必须要设置为true，这样很难控制。
而popover有一个hide隐藏事件，我们在这个事件里面将visible设置为null，切记不能设置为false或者true，不然就会影响下次点击的显示和影藏效果。

<script setup>
	import { reactive, ref } from 'vue'
	//控制商户弹出popover的显示
	let merchantPopoverRef = ref(null);
	//商户弹出表格的行数据获取事件
	function merchantRowGetData(row, column){
		formTopRight.Merchant = row.merchantName;
		merchantPopoverRef.value = false;
		//不能显示在这里添加，没有效果
		//merchantPopoverRef.value = null;
	}
	function resetMerchantPopover(){
		//为null后，下次点击input，框就能正常弹出，效果都会在
		merchantPopoverRef.value = null;
	}
</script>

效果为，点击input，正常弹出，点击popover以外的区域正常关闭。
点击table行，正常关闭，再次点击input正常弹出，且点击其他区域正常关闭，除了点击行，点击popover其他地方不会关闭。