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-column
v-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'
},
],
},
]
