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

• 2021 年 3 月 7 日
• 筆記
• ElementUI, JavaEEの个人所获小知识, javascript, VUE

关于在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
}