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