正常的数据是这样的

写死的table

 <el-table :data="bigDataList" width="100%"  border>
        <el-table-column label="物流公司" align="center" prop="expressName"></el-table-column>
        <el-table-column label="配送地区" align="center" prop="areaName"></el-table-column>
        <el-table-column label="每千克费用（元）" align="center" prop="ruleBigPerKiloFee"></el-table-column>
        <el-table-column label="面单费用（元）" align="center" prop="ruleBigTicketFee"></el-table-column>
</el-table>

但是目前的需求是要根据数据来生成表格的那一列并且对于的lable也是动态生成的 ，原型如图所示

红色的表示数据是动态生成

数据处理代码如下

                                const tableHead = [];
                                element.costInfos.forEach((costInfo, index) => {
                                    element['costInfos' + index] = costInfo.ruleSmallFee;
                                    costInfo.name = costInfo.weightMin + '~' + costInfo.weightMax;
                                    //这里是根据数据循环得到的动态的表头
                                    tableHead.push({ label: costInfo.name, property: `costInfos${index}` }); // 动态表头
                                });
                                // 这里是固定的表头，如果没有可不写
                                const anotherTableHead = [
                                    {
                                        label: '物流公司',
                                        property: 'expressName'
                                    },
                                    {
                                        label: '配送地区',
                                        property: 'areaName'
                                    }
                                ];
                                // 合并2部分的表头
                                this.tableHead = [...anotherTableHead, ...tableHead]; // 表头信息

最重要的Html部分

 <el-table :data="tableData" width="100%"  border>
        <el-table-column v-for="(item,index) in tableHead" :key="index" :label="item.label" :property="item.property" align="center">
              <template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
         </el-table-column>
 </el-table>

通过scope.row[scope.column.property]取到当前行的列字段,这里是基于elementui的table实现的所以那部分必须要比较熟悉，参考文章地址 https://blog.csdn.net/sinat_25295611/article/details/82748242