正常的数据是这样的
写死的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>
