el-popover 点击数据后自动隐藏

前端   2025-02-19 09:37   38   0  
<el-popover :ref="el => setPopoverRef(scope.index, el)"  placement="bottom" :width="846" trigger="click">
    <template #reference>
        <!--项目名称-->
        <el-input size="small" style="width: 92%"
                  v-model="scope.data.projectName"
                  @click="handleShowMedicineTable(scope.index)"
                  @input="val => getMedicineData(val)"
                  @keyup.enter="handleSlotEnter(scope.row, scope.index)"
        >
        </el-input>
    </template>
    <medicine-table :business="16242" :medicineData="medicineData" @click="handleProjectExplain"></medicine-table>
</el-popover>
// 动态设置 popover 引用
const popoverRefs = ref({})
const setPopoverRef = (index, el) => {
    if (el) {
        popoverRefs.value[index] = el
    }
}
const handleProjectExplain = async () => {
    // 关闭当前行的 popover
    if (popoverRefs.value[clickIndex.value]) {
        popoverRefs.value[clickIndex.value].hide()
}