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 进行判断。