el-table根据data动态生成列和行

css

//el-table-column加上fixed后会导致悬浮样式丢失，用下面方法可以避免
.el-table__body .el-table__row.hover-row td{background-color: #083a78 !important;
}
.el-table tbody tr:hover>td {background: #171F34 !important;
}

html

   <el-table ref="multipleTable" :data="gridData" :span-method="cellMerge"style="min-width: 1300px; white-space: nowrap" header-cell-class-name="headerCellClassName"row-class-name="rowClassName" cell-class-name="cellClassName"><!--show-summary :summary-method="getSummaries" --><!-- <el-table-column type="index" label="序号"> </el-table-column> --><el-table-column prop="projectName" label="项目" fixed="left"> </el-table-column><el-table-column prop="areaName" label="区域" fixed="left"> </el-table-column><el-table-columnv-for="(item,index) in gridData[0].dayList" ley="index"><template slot="header" slot-scope="scope">{{ item.dayName   }}</template><template slot-scope="scope">{{ gridData[scope.$index].dayList[index].dayDate }}</template></el-table-column><el-table-column prop="heji" label="月份合计" fixed="right"> </el-table-column><el-table-column prop="huanbi" label="月份环比" fixed="right"> </el-table-column><template slot="empty"><div class="empty"><img class="empty_img" src="@/assets/empty.png" /><div>暂无数据</div></div></template></el-table>

JS

 gridData: [{projectName:'用水情况(吨)',areaName:'商铺',heji:'456',huanbi:'10%',dayList: [{dayName: '1',dayDate: '16'},{dayName: '2',dayDate: '197'},{dayName: '3',dayDate: '198'},{dayName: '4',dayDate: '16'},{dayName: '5',dayDate: '197'},],},{projectName: '用水情况(吨)',areaName: '公寓',heji: '456',huanbi: '10%',dayList: [{dayName: '1',dayDate: '186'},{dayName: '2',dayDate: '187'},{dayName: '3',dayDate: '188'},{dayName: '4',dayDate: '16'},{dayName: '5',dayDate: '197'},],},]