【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
}