网站建设 代理/网站百度

难点：

普通方法会无法关闭，虚拟触发会导致选一个关一个，不用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-formclass="formPopover"label-width="64px":model="queryParams":inline="true"><el-form-item prop="Sex" label="性别"><el-selectv-model="queryParams.Sex"clearablefilterableplaceholder="请选择性别":teleported="false"><el-optionv-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-selectv-model="queryParams.BuildingUp"clearablefilterableplaceholder="请选择圈舍":teleported="false"><el-optionv-for="item in BuildingUpList":key="item":label="item":value="item"/></el-select></el-form-item><el-form-item prop="GroupName" label="栏舍"><el-selectv-model="queryParams.GroupName"clearablefilterableplaceholder="请选择栏舍":teleported="false"><el-optionv-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-selectv-model="queryParams.CowType"clearablefilterableplaceholder="请选择养殖类型":teleported="false"><el-optionv-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-selectv-model="queryParams.Category"clearablefilterableplaceholder="请选择生长阶段":teleported="false"><el-optionv-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-selectv-model="queryParams.RepCode"clearablefilterableplaceholder="请选择繁殖状态":teleported="false"><el-optionv-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-selectv-model="queryParams.GroCode"clearablefilterableplaceholder="请选择泌乳状态":teleported="false"><el-optionv-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-selectv-model="queryParams.Variety"clearablefilterableplaceholder="请选择品种":teleported="false"><el-optionv-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-selectv-model="queryParams.Color"clearablefilterableplaceholder="请选择花色":teleported="false"><el-optionv-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-selectv-model="queryParams.Lact"clearablefilterableplaceholder="请选择胎次":teleported="false"><el-optionv-for="item in LactList":key="item":label="item":value="item"/></el-select></el-form-item><el-form-item prop="Flag" label="在场状态"><el-selectv-model="queryParams.Flag"clearablefilterableplaceholder="请选择在场状态":teleported="false"><el-optionv-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-pickerv-model="dateList":clearable="true"type="daterange"unlink-panelsrange-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();}
};