效果图
首先是表头的处理部分
<template slot-scope="scope">
<el-table-column align="center">
<template slot="header" slot-scope="scope">
{{ name }}交接班统计
</template>
<el-table-column>
<template slot="header" slot-scope="scope">
统计时间：{{ nowShow }}
</template>
<el-table-column prop="team" label="班组" width="50"/>
<el-table-column prop="FGunNo" label="枪号" width="100"/>
<el-table-column prop="startWorkTime" label="接班时间" width="150" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.startWorkTime | dateFormat }}</span>
</template>
</el-table-column>
<el-table-column prop="endWorkTime" label="交班时间" width="150" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.endWorkTime | dateFormat }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
日期: {{ dateShow }}
</template>
<el-table-column prop="startFSumGas" label="接班底数" width="90" show-overflow-tooltip/>
<el-table-column prop="endFSumGas" label="交班底数" width="90" show-overflow-tooltip/>
<el-table-column prop="startFSerialNo" label="接班流水号" width="90" show-overflow-tooltip/>
<el-table-column prop="endFSerialNo" label="交班流水号" width="90" show-overflow-tooltip/>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
加气站站点: {{ name }}
</template>
<el-table-column prop="gasCount" label="加气次数" width="90" show-overflow-tooltip/>
<el-table-column prop="teamFsumGas" label="班累气量" width="90" show-overflow-tooltip/>
<el-table-column prop="gasOffset" label="气量偏差" width="80" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.gasOffset | keepTwoBitNum }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
操作人: {{ operator }}
</template>
<el-table-column prop="FSumGas" label="合计气量" width="120" show-overflow-tooltip/>
<el-table-column prop="Fmoney" label="合计金额" width="120">
<template slot-scope="scope">
<span>{{ scope.row.Fmoney | keepTwoBitNum }}</span>
</template>
</el-table-column>
<el-table-column label="现金量">
<el-table-column prop="FCashSumGas" label="气量" width="120" show-overflow-tooltip/>
<el-table-column prop="FCashMoney" label="金额" width="120">
<template slot-scope="scope">
<span>{{ scope.row.FCashMoney | keepTwoBitNum }}</span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
计量数据: {{ count }}
</template>
<el-table-column label="支付宝支付">
<el-table-column prop="FPaySumGas" label="气量" width="120" show-overflow-tooltip/>
<el-table-column prop="FPayMoney" label="金额" width="120">
<template slot-scope="scope">
<span>{{ scope.row.FPayMoney | keepTwoBitNum }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="微信支付">
<el-table-column prop="FWxSumGas" label="气量" width="120" show-overflow-tooltip/>
<el-table-column prop="FWxMoney" label="金额" width="120">
<template slot-scope="scope">
<span>{{ scope.row.FWxMoney | keepTwoBitNum }}</span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</template>使用element-ui table表格提供的多级表头效果 ===》 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
列表内容处理部分
表头代码、已经对应实现方法代码
<el-table v-show="mode" id="tables" :data="tableData" :summary-method="getSummaries" :span-method="objectSpanMethod" stripe show-summary style="width: 100%; font-size: 12px;">
</el-table>objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 8
}
}
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex !== 0 && columnIndex === 0) { // 第一列
this.mergeLineMethod()
const _row = this.mergeLineArr[rowIndex]
const _col = _row > 0 ? 1 : 0
console.log(_row + '------' + _col)
return {
rowspan: _row,
colspan: _col
}
}
if (row.total) {
if (columnIndex === 1) {
return {
rowspan: 1,
colspan: 7
}
}
if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (row.FGunNo === '班组小计') {
if (columnIndex === 1) {
return {
rowspan: 1,
colspan: 7
}
}
if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
return {
rowspan: 0,
colspan: 0
}
}
}
}mergeLineMethod() { // 处理合并表格数据
if (this.mergeLineFlag) return
this.mergeLineFlag = true
const mergeLine = this.tableData
mergeLine.forEach((item, i) => {
if (i === 0) {
this.mergeLineArr.push(1)
this.mergeLineIndex = 0
} else {
// 判断当前元素与上一个元素是否相同,是就给之前相同的第一个+1，并且数组添加一个0
if (mergeLine[i].team === mergeLine[i - 1].team) {
this.mergeLineArr[this.mergeLineIndex] += 1
this.mergeLineArr.push(0)
} else { // 如果与前一个不相同，则追加一个新从1开始的数字，此时更新mergeLineIndex的值
this.mergeLineArr.push(1)
this.mergeLineIndex = i
}
}
})
}使用element-ui table表格提供的合并行或列 ===》
说明：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
解析1：
下面对其进行解析
效果
解析2：
只对第一列，除了第一行。进行合并。 3 行 1列 其他两个 返回 0,0 表示被合并
效果
解析3
效果
解析4
效果
下面附上我的数据结构
{
"data":[
{
"gasCount":2761,
"FPaySumGas":0,
"FCashMoney":1075.9000000000049,
"FPayMoney":0,
"FCashSumGas":17198.06,
"FWxSumGas":0,
"teamFsumGas":17198.06,
"team":"合计",
"FSumGas":17198.06,
"Fmoney":1075.9000000000049,
"FWxMoney":0,
"gasOffset":0
},
{
"gasCount":2701,
"FCashMoney":1052.4000000000055,
"FPayMoney":0,
"FCashSumGas":16810.81,
"FGunNo":"班组小计",
"teamFsumGas":16810.81,
"team":"1",
"FSumGas":16810.81,
"gasOffset":0,
"FPaySumGas":0,
"FWxSumGas":0,
"Fmoney":1052.4000000000055,
"FWxMoney":0
},
{
"gasCount":2629,
"FCashMoney":1024.5500000000065,
"FPayMoney":0,
"FCashSumGas":16464.09,
"startFSerialNo":"6",
"startWorkTime":"2020-08-04 14:15:29",
"FGunNo":1,
"endFSumGas":"13477.34",
"teamFsumGas":16464.09,
"team":"1",
"endWorkTime":"2020-08-04 14:15:29",
"FSumGas":16464.09,
"gasOffset":0,
"startFSumGas":"4289.08",
"FPaySumGas":0,
"endFSerialNo":"6",
"FWxSumGas":0,
"Fmoney":1024.5500000000065,
"FWxMoney":0
},
{
"gasCount":72,
"FCashMoney":27.850000000000005,
"FPayMoney":0,
"FCashSumGas":346.72,
"startFSerialNo":"6",
"startWorkTime":"2020-08-04 14:16:09",
"FGunNo":2,
"endFSumGas":"15756.55",
"teamFsumGas":346.72,
"team":"1",
"endWorkTime":"2020-08-04 14:16:09",
"FSumGas":346.72,
"gasOffset":0,
"startFSumGas":"10560.74",
"FPaySumGas":0,
"endFSerialNo":"6",
"FWxSumGas":0,
"Fmoney":27.850000000000005,
"FWxMoney":0
},
{
"gasCount":60,
"FCashMoney":23.500000000000004,
"FPayMoney":0,
"FCashSumGas":387.25,
"FGunNo":"班组小计",
"teamFsumGas":387.25,
"team":"2",
"FSumGas":387.25,
"gasOffset":0,
"FPaySumGas":0,
"FWxSumGas":0,
"Fmoney":23.500000000000004,
"FWxMoney":0
},
{
"gasCount":30,
"FCashMoney":11.75,
"FPayMoney":0,
"FCashSumGas":219.85,
"startFSerialNo":"6",
"startWorkTime":"2020-08-04 14:16:09",
"FGunNo":1,
"endFSumGas":"16383.69",
"teamFsumGas":219.85,
"team":"2",
"endWorkTime":"2020-08-04 14:16:09",
"FSumGas":219.85,
"gasOffset":0,
"startFSumGas":"16919.17",
"FPaySumGas":0,
"endFSerialNo":"6",
"FWxSumGas":0,
"Fmoney":11.75,
"FWxMoney":0
},
{
"gasCount":12,
"FCashMoney":4.7,
"FPayMoney":0,
"FCashSumGas":55.54,
"startFSerialNo":"6",
"startWorkTime":"2020-10-04 14:16:09",
"FGunNo":2,
"endFSumGas":"4010.92",
"teamFsumGas":55.54,
"team":"2",
"endWorkTime":"2020-10-04 14:16:10",
"FSumGas":55.54,
"gasOffset":0,
"startFSumGas":"13348.08",
"FPaySumGas":0,
"endFSerialNo":"6",
"FWxSumGas":0,
"Fmoney":4.7,
"FWxMoney":0
},
{
"gasCount":18,
"FCashMoney":7.050000000000001,
"FPayMoney":0,
"FCashSumGas":111.86,
"startFSerialNo":"6",
"startWorkTime":"2020-08-04 14:16:09",
"FGunNo":3,
"endFSumGas":"16774.66",
"teamFsumGas":111.86,
"team":"2",
"endWorkTime":"2020-08-04 14:16:09",
"FSumGas":111.86,
"gasOffset":0,
"startFSumGas":"2466.15",
"FPaySumGas":0,
"endFSerialNo":"6",
"FWxSumGas":0,
"Fmoney":7.050000000000001,
"FWxMoney":0
}
],
"errmsg":"成功",
"errno":200,
"timestamp":1604656826932
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
