难点：
普通方法会无法关闭，虚拟触发会导致选一个关一个，不用visible显示的方法太麻烦。
所以结合其他人的方法，使用手动监听判断的方法（点击蓝色区域看参考，这大佬vue2的，我vue3）
注意：
在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在 Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件
而且关键是el-form自己不能挂ref，只能外层套一个div。第二个关键点是:teleported="false"，表单选项默认挂在body上，你得取消，挂本页面才能不选一下就关闭了
代码：
<el-form-item>
<el-popover
:visible="visiblePopover"
:width="425"
placement="bottom-start"
trigger="click"
@show="showEvent"
@hide="hideEvent"
>
<div ref="projectButton">
<el-form
class="formPopover"
label-width="64px"
:model="queryParams"
:inline="true"
>
<el-form-item prop="Sex" label="性别">
<el-select
v-model="queryParams.Sex"
clearable
filterable
placeholder="请选择性别"
:teleported="false"
>
<el-option
v-for="item in SexList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="BuildingUp" label="圈舍">
<el-select
v-model="queryParams.BuildingUp"
clearable
filterable
placeholder="请选择圈舍"
:teleported="false"
>
<el-option
v-for="item in BuildingUpList"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item prop="GroupName" label="栏舍">
<el-select
v-model="queryParams.GroupName"
clearable
filterable
placeholder="请选择栏舍"
:teleported="false"
>
<el-option
v-for="item in GroupNameList"
:key="item.value"
:label="item.value"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="CowType" label="养殖类型">
<el-select
v-model="queryParams.CowType"
clearable
filterable
placeholder="请选择养殖类型"
:teleported="false"
>
<el-option
v-for="item in CowTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="Category" label="生长阶段">
<el-select
v-model="queryParams.Category"
clearable
filterable
placeholder="请选择生长阶段"
:teleported="false"
>
<el-option
v-for="item in CategoryList"
:key="item.value"
:label="item.value"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="RepCode" label="繁殖状态">
<el-select
v-model="queryParams.RepCode"
clearable
filterable
placeholder="请选择繁殖状态"
:teleported="false"
>
<el-option
v-for="item in RepCodeList"
:key="item.value"
:label="item.value"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="GroCode" label="泌乳状态">
<el-select
v-model="queryParams.GroCode"
clearable
filterable
placeholder="请选择泌乳状态"
:teleported="false"
>
<el-option
v-for="item in GroCodeList"
:key="item.value"
:label="item.value"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="Variety" label="品种">
<el-select
v-model="queryParams.Variety"
clearable
filterable
placeholder="请选择品种"
:teleported="false"
>
<el-option
v-for="item in VarietyList"
:key="item.value"
:label="item.value"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="Color" label="花色">
<el-select
v-model="queryParams.Color"
clearable
filterable
placeholder="请选择花色"
:teleported="false"
>
<el-option
v-for="item in ColorList"
:key="item.value"
:label="item.value"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="Lact" label="胎次">
<el-select
v-model="queryParams.Lact"
clearable
filterable
placeholder="请选择胎次"
:teleported="false"
>
<el-option
v-for="item in LactList"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item prop="Flag" label="在场状态">
<el-select
v-model="queryParams.Flag"
clearable
filterable
placeholder="请选择在场状态"
:teleported="false"
>
<el-option
v-for="item in FlagList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="StartTime" label="进场时间">
<el-date-picker
v-model="dateList"
:clearable="true"
type="daterange"
unlink-panels
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="dateChange"
:teleported="false"
/>
</el-form-item>
</el-form>
</div>
<template #reference>
<el-button @click="visiblePopover = !visiblePopover"
>更多搜索</el-button
>
</template>
</el-popover>
</el-form-item>
const projectButton: Ref = ref(null);
let visiblePopover = ref(false);
const showEvent = () => {
document.addEventListener("click", hidePanel, false);
};
const hideEvent = () => {
document.removeEventListener("click", hidePanel, false);
};
const hidePanel = (e: any) => {
if (!projectButton.value.contains(e.target)) {
visiblePopover.value = false;
hideEvent();
}
};