elementui 再次打开dialog，绑定的数据不更新问题

最新推荐文章于 2024-04-09 14:29:09 发布

杨大大28

最新推荐文章于 2024-04-09 14:29:09 发布

阅读量3.6k

点赞数 2

分类专栏：前端文章标签： elementui vue.js html

本文链接：https://blog.csdn.net/popstarqq/article/details/119996511

版权

前端专栏收录该内容

93 篇文章

订阅专栏

本文介绍如何在Vue中通过外层v-if控制避免Dialog组件重复渲染，以及使用外层div解决DOM显示问题，重点在于生命周期管理和布局调整技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 因为dialog再次打开时不会重新渲染dom，只是简单的显示隐藏，所以第一次打开绑定值后，关闭再打开则不会走created和mounted生命周期，解决办法是在外层套一层div，用v-if控制

      <div v-if="editDialog_visual" >
        <el-dialog
          :area="[700,600]"
          top="middle"
          no-scrollbar
          title="人员编辑"
          :visible.sync="editDialog_visual"
          class="editDialog"
        >
          <!-- 编辑表单 -->
          <editForm :emitData="currentEditRow"></editForm>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editDialog_visual = false">确 定</el-button>
            <el-button @click="editDialog_visual = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>

在实际应用种，加上外层div后，dialog内部元素会不显示，设置高度即可解决

这样也算是解决了dialog绑定值的问题。