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),对话框组件可能提供了openvisible-change等事件。你可以在这些事件的回调函数中访问DOM元素。

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

methods: {  
  handleOpen() {  
    this.$nextTick(() => {  
      console.log(this.$refs.someInnerElement);  
    });  
  }  
}
相关推荐
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园5 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7276 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic6 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年6 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala6 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js