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

devtools/2024/9/23 0:15:46/

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>
-----------------------------------------------------
//javascriptmethods: {  handleOpen() {  this.$nextTick(() => {  console.log(this.$refs.someInnerElement);  });  }  
}