【ZeyFraのJavaEE开发小知识03】Elment UI & Vue.js

关于在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: '路由地址'}, query:{ key:Value })

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

<router-link :to="{ name: '路由名称', params:{ key:Value }">点击跳转</router-link>
<router-link :to="{ name: '路由地址', query:{ 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
}
posted @ 2021-03-07 11:43  ZeyFra  阅读(112)  评论(0编辑  收藏  举报