背景：vue 使用v-charts製作圖表，從後臺獲取資料， 並在 el-tab-pane 中顯示顯示

相關知識點：vue中使用v-chart，動態從後端獲取資料賦值，並解決 el-table-pane 在動態獲取資料渲染圖表遇到的問題

html:

<ve-pie :data="charData"></ve-pie>

script: data(){ return {}}

            charData:{
                columns: ['使用者狀態', '使用者數量'],
                rows: [
                    // { '使用者狀態': '啟用', '使用者數量': 1530 },
                    // { '使用者狀態': '凍結', '使用者數量': 250 },
                    // { '使用者狀態': '已廢棄', '使用者數量': 80 },

                ]                
            },
 

methods:從後臺獲取資料，沒什麼說的

遇到的問題：

因為是el-tab-pane的型別，所以資料在第一個頁面就出來了，然後點選到該頁面時，資料有了，但是圖表沒出來

這時就用watch監聽傳歸來的資料，然後設定el-tab-pane 為懶載入方式即可

    watch:{
        dataTable:{
            handler(newVal,oldVal)
            {
                console.log('newVal = ' + JSON.stringify(newVal))
                for
 
 (var i = 0; i < newVal.length; ++i)
                {
                    if (newVal[i].userStaus == "總計")
                    {
                        continue
                    }
                    this.charData.rows.push({
                        "使用者狀態":newVal[i].userStaus,
                        
 
"使用者數量":newVal[i].userMember
                    })
                }
            }
        }
    },

然後在外面中設定懶載入

<el-tab-pane label="使用者統計" name="userStatistic" lazy>

大概的解決思路就是:

頁面切換時再重新整理資料，資料變化後v-chart重新制作圖表顯示到頁面上去。

這樣的方法還能解決點選一個 el-table-pane 重新整理所有的 tab 頁資料造成的多餘請求和資源浪費問題