el-popover를 클릭할 수 없고, 클릭해도 응답하지 않으며, 일반적으로 팝업 상자를 표시할 수 없습니다.

프로젝트 시나리오:

테이블의 작업 버튼을 클릭한 후 목록을 새로고침하여 버튼의 표시 상태를 업데이트합니다.

문제 설명

`상태 업데이트 후 데이터 작업 버튼을 클릭합니다.
element-ui의 el-popover를 클릭하여 팝업창을 호출할 수 없으나, 페이지를 새로고침한 후에는 정상적으로 동작하는 것으로 확인되었습니다. 즉, 목록을 새로 고친 후 el-popover를 클릭할 수 없습니다.

---

원인 분석:

 <el-popover
                  :ref="`node-popover-adjust-download-${missions.id}`"
                  placement="right"
                  v-model="missions.isVisible"
                >
                  <p
                    v-if="!!missions.publishDep"
                    @click="
                      handleDownload(missions);
                      missions.isVisible = false;
                    "
                    style="color:var(--mainColor);cursor: pointer;"
                  >
                    下载风险提示函反馈单
                  </p>
                  <p
                    style="color:var(--mainColor);cursor: pointer;"
                    @click="
                      downNow(missions);
                      missions.isVisible = false;
                    "
                  >
                    下载风险事前评估表
                  </p>
                  <!-- 已提交已整改加有附件就可以下载 -->
                  <span
                    v-if="
                      missions.attachmentType === 1 &&
                        (!getSubmitStatus(missions) ||
                          (loginUl.depType === 1 && loginUl.orgId === 7))
                    "
                    style="pointer-events: auto;"
                    slot="reference"
                    class="handle download"
                    title="下载"
                  ></span>
                </el-popover>

v-if에서 판단을 true로 변경하려면 작업 버튼을 클릭하십시오.다운로드 버튼을 놓은 후 클릭 할 수 없지만 페이지를 새로 고침하여 클릭하고 팝업 창을 정상적으로 깨울 수 있습니다. 그래서 컴포넌트가 판단에서 값의 변화를 실시간으로 모니터링하지 않았던 것 같아요.

---

해결책:

구성 요소는 DOM 요소를 가져오기 전에 페이지가 렌더링될 때까지 기다려야 합니다. 이는 DOM의 렌더링 메커니즘 때문이므로 더 이상 파괴 및 재구축되지 않지만 디스플레이는 요소를 표시하고 숨기는 데 사용됩니다. .드디어 문제가 해결되었습니다.이 문제는 ref 및 v-If와 관련하여 동일한 문제와 함께 사용할 수 없으므로 v-if 대신 v-show를 사용하는 것이 해결책입니다.

 <span
                    v-show="
                      missions.attachmentType === 1 &&
                        (!getSubmitStatus(missions) ||
                          (loginUl.depType === 1 && loginUl.orgId === 7))
                    "
                    style="pointer-events: auto;"
                    slot="reference"
                    class="handle download"
                    title="下载"
                  ></span>