关于在Element UI的el-dialog组件中使用echarts的问题

问题描述

"Cannot read property 'getAttribute' of null"

"ECharts Can't get dom width or height!"

"Initialize failed: invalid dom"

原因

当我们打开el-dialog时,dom元素是还没有渲染完成的

解决

// 使用setTimeout定时间器
open(){
this.dialogVisible = true;
setTimeout(() => {
this.setMyCharts();
},300)
}
// 【推荐】使用Vue.nextTick()
open(){
this.dialogVisible = true;
this.$nextTick(() => {
this.setMyCharts();
})
}

关于Vue.netTick():

在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的 DOM。简单来说当数据更新了,在dom中渲染后,自动执行该函数

关于ECharts有时在el-dialog中宽度无法正常显示的问题

问题描述

有的时候将 ECharts 放到 el-tab或者 el-dialog之中,会发现图表的宽度会显示的不那么正确

原因

ECharts 本身并不是自适应的,当父级容器的宽度发生变化的时候需要手动调用它的 .resize() 方法。

解决

在dialog出现之后再init图表即可

关于在Vue切换路由时如何传递参数

问题描述

从A页面跳转到B页面,将A页面的参数传递给B页面

业务场景:查看某条数据的详情跳转至详情页面,在详情页面中显示

解决

一、编程式的导航

1、借助this.$router.push()

对于该方法来说,传参有两种方式。一种是通过params,一种是query。

// 前者的使用必须对该路由进行命名才能使用
this.$router.push({name: '路由名称'}, params:{ key:Value })
// 后者通过路由地址即可
this.$router.push({path: '路由地址'}, params:{ key:Value })

二、声明式的导航,使用router-link

<router-link :to="{ name: '路由名称', params:{ key:Value }">点击跳转</router-link>
<router-link :to="{ name: '路由地址', params:{ key:Value }">点击跳转</router-link>

注意

1、使用query和params的区别:query 参数拼接在url, 用户可修改, params 类似post 用户不可见,因此推荐params的方式

2、接收时参数都是在route中,而不是在router

// 路由事件
let params = {
id: this.id,
userName: this.userName
}
this.$router.push({
name: 'B',
params
})
// B页面接收
created() {
const { id, userName } = this.$route.params
}

【ZeyFraのJavaEE开发小知识03】@DateTimeFomat和@JsonFormat的更多相关文章

  1. 【ZeyFraのJavaEE开发小知识01】@DateTimeFomat和@JsonFormat

    @DateTimeFormat 所在包:org.springframework.format.annotation.DateTimeFormat springframework的注解,一般用来对Dat ...

  2. 【ZeyFraのJavaEE开发小知识05】Mybatis-Plus & Axios

    关于如何在Mybatis-Plus中添加SQL拦截器 之前ZeyFra在MyBatis-Plus[踩坑记录01]一文中提到过,使用Mybatis-Plus时最好使用MybatisSqlSessionF ...

  3. 【ZeyFraのJavaEE开发小知识02】MybatisPlus&ElementUI

    1.关于如何获得Mybatis-Plus在插入对应为自增长主键但并未对该主键赋值的实体类之后其主键值 对应数据库中某张表并未设置主键值,但其主键为自增长类型的实体类,在使用Mybatis-Plus做i ...

  4. React Native环境配置、初始化项目、打包安装到手机,以及开发小知识

    1.前言 环境:Win10 + Android 已经在Windows电脑上安装好 Node(v14+).Git.Yarn. JDK(v11) javac -version javac 11.0.15. ...

  5. bootstrap学习笔记(网页开发小知识)

    这是我在学习Boostrap网页开发时遇到的主要知识点: 1.导航条navbar 添加.navbar-fixed-top类可以让导航条固定在顶部,固定的导航条会遮住页面上的其他内容,除非给<bo ...

  6. Python接口开发小知识

    关于数据库设计 接口开发多学习数据库表操作,这是要点 不存在删除数据,每个可能被删除数据的表加一个is_active属性 不同的表可以有多个相同的字段,字段属性少用禁止非空 不要设置太多主外键(高内聚 ...

  7. JSP+Ajax站点开发小知识

    一.JSP基础 1.<select  name="love"  size="3">当中的size属性指定了列表框显示选项的条数.假设全部选项多于这个 ...

  8. Android开发小知识

    修改Android app图标(Android Studio) 1.  res\drawable 放置icon.png(此图片是你需要修改的图标); 2.  修改AndroidManifest.xml ...

  9. web开发小知识

    session共享机制:f5刷新是再次提交之前的数据请求 地址栏回车属于不同的请求 不同浏览器获取不到之前数据 同一浏览器可以获取同步数据 session注销:session.invalidate() ...

随机推荐

  1. hdu-6699 Block Breaker

    题意: 就是给你一个n行m列的矩形,后面将会有q次操作,每次操作会输入x,y表示要击碎第x行第y列的石块,当击碎它之后还去判断一下周围石块是否牢固 如果一个石块的左右两边至少一个已经被击碎且上下也至少 ...

  2. JavaScript——浏览器检查

    遍历opera中的所有方法

  3. Python小练习批量爬取下载歌曲

    import requests import os headers={ 'Cookie': '_ga=GA1.2.701818100.1612092981; _gid=GA1.2.748589379. ...

  4. M1 MacBook安装Homebrew

    在装载M1芯片的MacBook产品上,默认是不带有homebrew这款包管理工具的,具体原因官方解释为适配问题,原有的homebrew无法与silicon Mac机型匹配.但是这并不意味着我们不可以在 ...

  5. codeforces - 15C Industrial Nim(位运算+尼姆博弈)

    C. Industrial Nim time limit per test 2 seconds memory limit per test 64 megabytes input standard in ...

  6. C++中二维数组作为函数参数

    在平时,我们经常会遇到将整个数组作为函数参数的情况,一维数组的情况,就是用数组名当形参和实参,传递的是数组的首地址.二维数组我们用的也很多,但是总是有各种问题,今天我总结一下 有个很重要的一点,字符串 ...

  7. DOM型XSS

    打开漏洞页面,随便输入点东西,发现没有啥东西. 但是我们发现我们输入的11,在面的herf 中 看到这儿就很简单了,我们只需要闭合一下,就可以构造出我们的payload了. '><img ...

  8. Linux 驱动框架---i2c驱动框架

    i2c驱动在Linux通过一个周的学习后发现i2c总线的驱动框架还是和Linux整体的驱动框架是相同的,思想并不特殊比较复杂的内容如i2c核心的内容都是内核驱动框架实现完成的,今天我们暂时只分析驱动开 ...

  9. webpack4.0源码解析之打包后js文件分析

    首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...

  10. vscode & javascript & react & "editor.foldingStrategy": "indentation"

    vscode & javascript & react & "editor.foldingStrategy": "indentation" ...