关于在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. 使用SignTool对软件安装包进行数字签名(二)--进行数字签名

    四.使用signcode.exe为安装程序.库或cab包签名 1.运行signcode.exe. 2.点击"下一步",选择需要签名的文件(安装程序.库或cab包). 3.点击&qu ...

  2. 创建AVL树,插入,删除,输出Kth Min

    https://github.com/TouwaErioH/subjects/tree/master/C%2B%2B/PA2 没有考虑重复键,可以在结构体内加一个int times. 没有考虑删除不存 ...

  3. windows 命令行 cmd 控制exe程序输入输出并比较

    参考 https://www.cnblogs.com/zccz14/p/4588634.html 例子: 对exe输入输出 使用fc比较不同

  4. 牛客国庆2 F-平衡二叉树【非原创】

    题目:戳这里 学习博客:戳这里

  5. 左神算法第五节课:认识哈希函数和哈希表,设计RandomPool结构,布隆过滤器,一致性哈希,岛问题,并查集结构

    认识哈希函数和哈希表 MD5Hash值的返回范围:0~9+a~f,是16位,故范围是0~16^16(2^64)-1, [Hash函数],又叫散列函数: Hash的性质: 1)  输入域无穷大: 2)  ...

  6. codeforces 868C

    C. Qualification Rounds time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  7. Leetcode(145)-二叉树的后序遍历

    给定一个二叉树,返回它的 后序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [3,2,1] 思路:一开始编写二叉树后序遍历的程序,感觉定级为困难有点欠妥,确实,如果用 ...

  8. MD5强碰撞

    关卡一         md5弱比较,为0e开头的会被识别为科学记数法,结果均为0 payload param1=QNKCDZO&param2=aabg7XSs 关卡二         md5 ...

  9. Linux内核实现透视---工作队列

    作为Linux中断低半部的另一种实现机制的基础,工作队列的出现更多的是为了解决软中断和Tasklet对于用户进程的时间片的不良影响问题的.工作队列本身是可以使用内核线程来替代的,但是使用线程来实现复杂 ...

  10. Linux 驱动框架---input子系统框架

    前面从具体(Linux 驱动框架---input子系统)的工作过程学习了Linux的input子系统相关的架构知识,但是前面的学习比较实际缺少总结,所以今天就来总结一下输入子系统的架构分层,站到远处来 ...