elementui中无法获取el-dialog中的id

最新推荐文章于 2025-02-13 17:42:33 发布

转载最新推荐文章于 2025-02-13 17:42:33 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/qq_22472619/article/details/108695909

文章标签：

#elementui #前端 #javascript

本文介绍了在Vue项目中使用el-dialog组件遇到的问题：dialog关闭后重新打开不再触发mounted，导致地图初始化失败。解决方案包括两种方法：一是使用v-if指令动态创建和销毁dialog以确保每次打开时重新初始化；二是通过watch监听dialog的显示状态，在显示时手动调用地图初始化方法。这两种方法可以有效解决dialog内地图组件无法正确加载的问题。

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

el-dialog组件在第一次使用的时候没有问题，mounted也可以触发，但是关闭dialog后再次弹出就不再走mounted，导致可能没有办法及时获取到新的数据。

解决办法：

方法一、v-if

网上有很多人说在dialog的外层套一个div来解决，具体方式如下图

方法二、watch

我的解决办法是使用watch来进行监听。

watch: {
  showDialog(val) {
    this.initMap()
  }
},
methods:{
  initMap(){
      const id = document.getElementById('mapView')
      const map = new Map({
        target: 'mapView',
        view: new View({
          center: [486230.87836628966,3765719.5128127127],
          zoom: 19,
          projection: 'EPSG:3857',
        }),
        controls: defaultControls({
          zoom: false,
          attribution: false,
          rotate: false,
        }),
      });
    }
}

<div v-if="showPoint">
   <el-dialog title="巡查点位查看" :visible.sync="showPoint" width="1400px" append-to-body>
      <div class="patrollog">
        <div id="mapView" class="patrollog-mapDiv"></div>
        <div class="patrollog-wrapper">
        </div>
      </div>
   </el-dialog>
</div>

不加v-if，直接mounted调用initMap，target取不到，document.getElementById('mapView') 值为null