element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

  • 给el-dialog添加@open="open()"
  • 在刚进入页面的时候对话框是关闭的，echarts不进行获取dom，当点击对话框出来的时候，有个opened事件，在这个事件里边进行echarts的初始化，执行数据；
<el-dialog
   lock-scroll
   width="80%"
   style="height:100%;"
   @opened="opens">
   <div style="display:flex;">
       <div ref="chart1"></div>
       <div ref="chart2"></div>
   </div>
</el-dialog>
methods:{
    initChart1() {
         this.chart1 = this.$echarts.init(this.$refs.chart1)
         this.chart1.setOption(this.chart1option)
     },
     initChart2() {
         this.chart2 = this.$echarts.init(this.$refs.chart2)
         this.chart2.setOption(this.chart2option)
     },
     // 进行echarts的初始化，执行数据
     opens(){
         this.$nextTick(() => {
            this.initChart1()
            this.initChart2()
         })
     }

elementUI对话框Dialog使用技巧

在我工作过程中使用Dialog对话框的需求挺多的，也积累了一下使用技巧，本篇文章用作记录使用技巧，基础操作可看elementUI官方文档：element UI官网

一、对话框禁止ESC键、点击空白区域关闭

:close-on-click-modal="false"  //禁用点击空白区域
:close-on-press-escape="false" //禁用ESC键

二、对话框body设置滚动条

给对话框设置overflow: auto;属性即可。

overflow: auto;

三、对话框表单数据初始化（清空数据）

1.resetFields()

给对话框设置close事件，绑定resetFields()数据初始化方法。

<el-dialog
  :title="visible.title"
  :visible.sync="visible.add"
  width="40%"
  @close="cancel">
  
  <el-form>
  ref="Form"
  :model="Editor"
  :rules="rules">
  </el-form>
  
</el-dialog>
cancel () {
  this.visible.add = false;
  this.$nextTick(() => {
    this.$refs.Form.resetFields();
  })
},

resetFields()方法也可以将表单验证的效果清除。

2.this.$options.data()
this.$options.data()方法重置组件Data()里的数据。

<el-dialog
  :title="visible.title"
  :visible.sync="visible.add"
  width="40%"
  @close="cancel">
  
  <el-form>
  ref="Form"
  :model="Editor"
  :rules="rules">
  </el-form>
  
</el-dialog>
cancel () {
  this.visible.add = false;
  this.Editor = this.$options.data().Editor;
},

到此这篇关于element-ui 对话框dialog里使用echarts，报错'dom没有获取到'？的文章就介绍到这了,更多相关element-ui 对话框dialog使用echarts报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • element-ui中dialog弹窗关闭按钮失效的解决

    如下所示: <el-dialog title="修改库存" :visible.sync="kcDialog" @close="kcDialog = false"> ... </el-dialog> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识:webpack外部扩展,依赖前置 引入了外部js index.html <script src="https://code.jq

  • element-ui dialog弹窗增加全屏功能(推荐)

    目录 一.定义全局变量 dialogFull 用来控制弹窗 二.dialog标签添加全局属性绑定 三.设置title区域的自定义 四.css样式部分: 完成效果图: 一.定义全局变量 dialogFull 用来控制弹窗 dialogFull:false, 二.dialog标签添加全局属性绑定 :fullscreen="dialogFull" 三.设置title区域的自定义 <template slot="title"> <div class=&qu

  • 基于element-ui对话框el-dialog初始化的校验问题解决

    不刷新页面重新打开el-dialog时,如果我们绑定了rules或者某个值需要required,它总会自动校验. 查看了多个博文,发现常用的有两种解决方法(下列方法都可以在其他博文查看,不再细写,如有需要请自行查询): 1.给dialog套上v-if : 2.在关闭dialog时,监听关闭回调,清除校验. 我在自己的项目里使用了上述两种方法,都不太好用,自己琢磨出了另一种方法: <el-dialog @open="openDialog()"> </el-dialog&

  • element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

    给el-dialog添加@open="open()" 在刚进入页面的时候对话框是关闭的,echarts不进行获取dom,当点击对话框出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-dialog lock-scroll width="80%" style="height:100%;" @opened="opens"> <div style="displa

  • element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

    element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

    目录 发现错误 解决 补充:el-date-picker 初始化报错 总结 发现错误 这两天在写新项目的时候,遇到了element ui 时间日期选择器一直报错 [Vue warn]: Avoid mutating a prop directly since the value will beoverwritten whenever the parent component re-renders.Instead, use a data or computed property based on

  • vue中使用element ui的弹窗与echarts之间的问题详解

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-drawer title="分析图表"

  • element ui里dialog关闭后清除验证条件方法

    关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" custom-class="editDialog" :close-on-click-modal="false" :before-close = "cleanContent" :show-cl

  • element ui 对话框el-dialog关闭事件详解

    通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 <el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog> 在标签中加入@close='closeDialog' mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 },

  • Vue router/Element重复点击导航路由报错问题及解决

    Vue router/Element重复点击导航路由报错问题及解决

    目录 Vue router/Element重复点击导航路由报错 解决方法如下 Vue使用element-UI路由报错问题 报错代码 修改方案 Vue router/Element重复点击导航路由报错 虽然此报错并不会影响项目运行,但是作为一个强迫症的码农的确受不了error 解决方法如下 方法1:在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可: 方法2:若不想更换版本解决方法 在router.js中加入以下代码就可以 记住插入的位置 c

  • jQuery dataTables与jQuery UI 对话框dialog的使用教程

    jQuery dataTables与jQuery UI 对话框dialog的使用教程

    首先介绍下这两个插件功能 1.DataTables是一个jQuery的表格插件. 官方网站及其下载地址:http:/www.datatables.net 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 2.对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript的aler

  • 使用Element的InfiniteScroll 无限滚动组件报错的解决

    一.问题描述 在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node' InfiniteScroll的更多用法element官网 二.解决办法 给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可. <template> <

  • echarts报错:Error in mounted hook的解决方法

    echarts报错:Error in mounted hook的解决方法

    目录 1 .具体报错内容: 2.解决办法: 3.原因: 4.扩展–import导入的方式: 总结 echarts安装创建图表时报这种错误:Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)” 1 .具体报错内容: 2.解决办法: 原先大家可能是这样的写法 import echarts from 'echarts' 后面改为这样导入就不会出错了 import * as ech

  • Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)

    Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)

    目录 Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘) 第一次解决问题 第二次解决问题 Vue引入Echarts报错解决 Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘) 代码: 报错信息: 上面的报错主要是: Cannot set properties of undefined (setting ‘plate’) 翻译之后就是:无法

随机推荐