【ZeyFraのJavaEE開發小知識03】@DateTimeFomat和@JsonFormat
阿新 • • 發佈：2021-03-07
# 關於在Element UI的el-dialog元件中使用echarts的問題
**問題描述**：
```javascript
"Cannot read property 'getAttribute' of null"
"ECharts Can't get dom width or height!"
"Initialize failed: invalid dom"
```
**原因**：
當我們開啟`el-dialog`時，dom元素是還沒有渲染完成的
**解決**：
```javascript
// 使用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。
```javascript
// 前者的使用必須對該路由進行命名才能使用
this.$router.push({name: '路由名稱'}, params:{ key：Value })
// 後者通過路由地址即可
this.$router.push({path: '路由地址'}, params:{ key：Value })
```
二、宣告式的導航，使用`router-link`
```html
點選跳轉 點選跳轉
```
**注意**：
1、使用query和params的區別：query 引數拼接在url, 使用者可修改, params 類似post 使用者不可見，因此推薦params的方式
2、接收時引數都是在route中，而不是在router
```javascript
// 路由事件
let params = {
id: this.id,
userName: this.userName
}
this.$router.push({
name: 'B',
params
})
// B頁面接收
created() {
const { id, userName } = this.$route.param