Vue3.0使用antd时，打开Modal框时无法获取里面的dom节点

解决模态框显示前后数据同步问题：innerHTML vs. forceRender与nextTick

最新推荐文章于 2024-08-21 10:26:56 发布

原创最新推荐文章于 2024-08-21 10:26:56 发布 · 3.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Vue3.0 #antd

Vue3.0 同时被 2 个专栏收录

7 篇文章

订阅专栏

antd

6 篇文章

订阅专栏

本文讲述了在Vue中如何在打开模态框前将后台预存的数据填充到编辑框，涉及使用`v-model:visible`、`forceRender`属性、`nextTick`回调，以及在多模态场景下处理销毁和数据同步的挑战。

问题：打开模态框之前，如果原本后台存有值需要，如何填写到编辑框里面？
在这里插入图片描述

测试方法1：在打开模态框的方法里面，获取dom节点然后innerHTML，比如

  showModalList() {
        data.fxModel = true;
        document.getElementById("info")?.insertAdjacentHTML("afterbegin", props.fxValue);
  },

报错document.getElementById(“info”)找不到
解决方法1：Modal中有forceRender属性强制渲染Modal

   <a-modal
    v-model:visible="fxModel"
    :forceRender="true"
    @ok="fxFunHandleOk"
    title="公式编辑"
    width="900px"
  >

可以解决的小伙伴可以去试试然后洗洗睡了。
在这里插入图片描述
测试方法1的问题：因为我用到的模态框不止一处，所以我需要关闭时销毁 Modal 里的子元素，又用了

:destroyOnClose="true"

的属性，这样一来就冲突了，我还是获取不到document.getElementById(“info”)
最终解决方法：加destroyOnClose属性+nextTick方法

  <a-modal
    v-model:visible="fxModel"
    :destroyOnClose="true"
    @ok="fxFunHandleOk"
    title="公式编辑"
    width="900px"
  >

  showModalList() {
    data.fxModel = true;
      nextTick(() => {
		document.getElementById("info")?.insertAdjacentHTML("afterbegin", props.fxValue);
      });
  },

Vue3.0使用antd时，打开Modal框时无法获取里面的dom节点

2 条评论