vue + element 先遍历表头再遍历列表内容

最近接了一个新的需求，后台传过来的数据是一个列表，但是这个列表的列不确定有多少也不确定列里面的字段是什么，所以我只能先遍历一下表头然后再编列行那导航里面的数据，不多说上代码

                    <el-table 
                      :data="tableData"  
                      max-height="420" 
                      style="width: 100%" 
                      @selection-change="handleSelectionChange" 
                      @row-click="rowDetails"
                      @cell-dblclick="cellDblDetails">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column label="设备名称" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.epdMachineName}}</p>
                            <p> ({{scope.row.mac}})</p>
                        </template>
                        </el-table-column>
                        <el-table-column 
                          v-for="item in tableConfig" 
                          :key="item.id" 
                          :prop="item.key" 
                          align="center" 
                          header-align="center" 
                          :label="item.key" 
                          min-width="50">
                        <template slot-scope="scope">
                            <div :class="'cellBg_'+scope.row['TAG_'+item.id]">
                                <!-- <input type="text" v-model="scope.row[item.key]"> -->
                                    <!-- <span>{{scope.row[item.name]}}</span> -->
                                    <span v-if="scope.row.isSet">
                                        <el-input size="small" 
                                        v-model="scope.row[item.value]" 
                                        placeholder="请输入内容" 
                                        @change="handleEdit(scope.$index, scope.row)">
                                        </el-input>
                                    </span>
                                    
                                    <span v-else>{{scope.row[item.value]}}</span>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleUpdate(scope.$index, scope.row)">更新</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

具体操作不同的自己再修改一下下吧