vue element table 動態渲染表頭 生成表格

一個需求： 

父組件上的一些篩選條件影響到了子組件的table表頭。也就是說這個表頭是動態添加的，不固定。

子組件 -> table 組件

<template>
    <div class="fund-evalute-result">
         <el-table 
        style="100%" 
        :data="resultArr"
        @sort-change='sortChange'
        v-loading="loading"
        ref="evaluateTable"
        > 

            <el-table-column 
            header-align="center"
            v-for="item in labelArr"
            :key="item.label"
            :label="item.label"
            :fixed="item.fixed">

                <template v-if="item.children"> 
                    <div>
                        <el-table-column 
                        v-for="secItem in item.children" 
                        :prop="secItem.prop"
                        :label="secItem.label" 
                        :width="secItem.width" 
                        :key="secItem.label">

                            <template slot-scope="{ row }">
                                <div>
                                   {{ getRowVal(row,secItem) }}    
                                </div>
                            </template>

                        </el-table-column>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <page 
        :totalPage="totalPage" 
        :total="total"
        :curPage="curPage" 
        @setPage="gotoPage">
    </page>  
    </div>
</template>
export default {
   components: {
        page
   },
   props: {
       resultKey: {
           type: String
       },
       labelArr: { // 這裏是動態傳遞過來的表頭標籤
           type: Array,
           default () {
               return []
           } 
       }
   },
   data() {
       return {
            resultArr: [],
            loading: true, 
            sortColumn: '',
            sortOrder: 0,
            total: 0,
            totalPage: 90,
            curPage: 1,
            pageSize: 10,
       };
   }
}

這個 動態的表頭標籤的設置大概是這個樣子： 

fundBasicLabels: [
              {
                label: 'xxxx',
                prop: '',
                width: 700,
                children: [
                  {
                    label: '日期',
                    prop: 'date',
                    width: 150,
                    fixed: true  
                  },
                  {
                    label: 'xxxx',
                    prop: 'alias',
                    width: 200,
                    fixed: true
                  },
                  {
                    label: 'xxxx',
                    prop: 'code',
                    width: 150,
                    fixed: true
                  }
                  ]
                }
            ]

【注意】： 有個bug，就是通過props傳遞會有個問題，子組件剛開始渲染的時候，表頭文件並沒有傳遞過去，因爲一開始ptops過去的是一個空數組，子組件生成完畢之後，props傳遞的表頭數組纔會傳過去。這樣會導致表頭加載不完全的情況。所以建議是監控一下props；有值得時候再請求一下數據；

watch: {
       labelArr: {
           deep: true,
           handler (n,o) {
               if (n.length) {
                   this.getTableData();
               }
           }
       }
   },

或者也可以增加 v-if 進行判斷。