ElementUI或AntDesign拿不到对话框内元素的 ref或者dom

https://www.cnblogs.com/trampeagle/p/15146668.html

element-UI 组件 dialog 中 ref 获取不到的问题解决方案_el-dialog ref获取不到-CSDN博客

在使用Vue.js结合ElementUI或Ant Design Vue这类UI框架时，有时会遇到无法直接通过ref获取到对话框（Dialog）内元素DOM的问题。这主要是因为Vue的异步更新机制和组件的挂载（mount）时机 。当对话框是条件渲染（如使用v-if）时，它可能在Vue的DOM更新周期中尚未挂载或完全渲染，因此无法立即通过ref访问其内部元素。

1.nextTick

Javascript事件循环应用---nextTick()详解_js nexttick-CSDN博客

this.$nextTick() 是 Vue.js 中的一个实例方法，它非常有用，尤其是在处理 DOM 更新和依赖 DOM 的操作时。这个方法允许你在 Vue 完成 DOM 更新后立即执行某个回调函数。这对于确保你的 DOM 查询或操作是在 Vue 的异步更新队列之后执行的非常关键。

this.$refs.myDialog.open(); // 假设这是打开对话框的方法  
this.$nextTick(() => {  
  // 现在对话框已经打开并渲染完成，可以安全地访问其内部元素  
  console.log(this.$refs.someInnerElement); // someInnerElement是对话框内元素的ref  
});

2.对话框身上方法getContainer()【Ant】

  <!--a-modal ref拿不到的解决方法-->
    <a-modal :visible="vis" @ok="handleOk"  @cancel="handleCancel"  :getContainer="() => $refs.dialogContainer">
      <div class="head" style="text-align: center"><h1>{{ diaOption.name }}</h1></div>
      <div class="infos">
<!--       <div class="info-item">设备状态：<span><img src="" alt=""></span></div>-->
        <div class="info-item"><b>所属区域：</b><span>{{ diaOption.location }}</span></div>
        <div class="info-item"><b> {{diaOption.currentName }}：</b> <span>{{ diaOption.currentValue }}</span></div>
        <div class="info-item"><b>布设时间：</b><span>2024年7月1日</span></div>
      </div>
<!--      <br>-->
      <div class="chart-title"><b>{{ diaOption.chartTitle }}：</b></div>
      <div id="chart" ref="chart"
        style="width: 440px;height: 260px; margin: 0 auto; background-color: #1e1f22"></div>
    </a-modal>

3. 监听对话框的open事件（Element）

对于某些UI框架（如ElementUI），对话框组件可能提供了open或visible-change等事件。你可以在这些事件的回调函数中访问DOM元素。

<el-dialog @open="handleOpen" ref="myDialog">  
  <div ref="someInnerElement">这是对话框内的元素</div>  
</el-dialog>
-----------------------------------------------------
//javascript

methods: {  
  handleOpen() {  
    this.$nextTick(() => {  
      console.log(this.$refs.someInnerElement);  
    });  
  }  
}