效果图
<template>
<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
<el-table-column prop="gateway_name" label="网关" width="220"></el-table-column>
<el-table-column prop="meter_port" label="串口" width="130"></el-table-column>
<el-table-column prop="meter_address" label="仪表地址"></el-table-column>
<el-table-column prop="meter_name" label="仪表名称"></el-table-column>
<el-table-column label="通讯状态">
<template>
<div>通讯状态</div>
</template>
</el-table-column>
<el-table-column label="是否报警">
<template slot-scope="scope">
<button>
{{ scope.row.meter_warn == 0 ? '关闭' : '开启' }}
</button>
</template>
</el-table-column>
<el-table-column prop="offlineTime" label="离线时间"></el-table-column>
<el-table-column prop="time" label="最后采集时间"></el-table-column>
<el-table-column prop="fromNow" label="累计中断时间"></el-table-column>
</el-table>
</template>
数据格式
const list = [
{
meter_warn: 1,
meter_address: '2',
meter_number: '555',
meter_port: 'COM',
meter_stamp: 1658192669,
meter_name: '555',
offlineTime: '2022-07-19 09:04:29',
state: '0',
time: '2022-07-19 09:04:29',
meter_id: 48276,
fromNow: '2天'
},
{
meter_warn: 1,
meter_address: '555',
meter_number: '444',
meter_port: 'COM',
meter_stamp: 1658192707,
gateway_id: 5084,
meter_name: '444',
offlineTime: '2022-07-19 09:05:07',
state: '0',
time: '2022-07-19 09:05:07',
meter_id: 48278,
gateway_name: '安科瑞DTSD表网关',
fromNow: '2天'
},
{
meter_warn: 1,
meter_address: '666',
meter_number: '666',
meter_port: 'COM',
meter_stamp: 1658194955,
gateway_id: 5084,
meter_name: '666',
offlineTime: '2022-07-19 09:42:35',
state: '0',
time: '2022-07-19 09:42:35',
meter_id: 48279,
gateway_name: '安科瑞DTSD表网关',
fromNow: '1天'
},
{
meter_warn: 1,
meter_address: '1',
meter_number: '1',
meter_port: 'COM',
meter_stamp: 1658192483,
gateway_id: 5085,
meter_name: '1',
offlineTime: '2022-07-19 09:01:23',
state: '0',
time: '2022-07-19 09:01:23',
meter_id: 48274,
gateway_name: '72表网关',
fromNow: '2天'
},
]
javascript 代码
export default {
data() {
return {
tableData: []
}
},
// 把mounted放在方法渲染数据里面
mounted() {
const r = this.formatList(list)
this.tableData = r
},
methods: {
formatList(data) {
// 深拷贝一下数据,免得层级丢失
const array = JSON.parse(JSON.stringify(data))
// 第一列
let rowSpan = 1
let temp = {}
// 第二列
let rowSpan2 = 1
let temp2 = {}
//得到的数据循环
array.forEach((item, index) => {
//如果数组的下标等于0
if (index === 0) {
temp[item.gateway_name] = rowSpan
temp2[item.gateway_name + item.meter_port] = rowSpan2
} else {
const isEqual = item.gateway_name === array[index - 1].gateway_name
temp[item.gateway_name] = isEqual ? (rowSpan = rowSpan + 1) : (rowSpan = 1)
const isEqual2 = item.gateway_name + item.meter_port === array[index - 1].gateway_name + array[index - 1].meter_port
temp2[item.gateway_name + item.meter_port] = isEqual2 ? (rowSpan2 = rowSpan2 + 1) : (rowSpan2 = 1)
}
})
array.forEach((item) => {
item.rowSpan = temp[item.gateway_name] || 0
delete temp[item.gateway_name]
item.rowSpan2 = temp2[item.gateway_name + item.meter_port] || 0
delete temp2[item.gateway_name + item.meter_port]
})
return array
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return {
rowspan: this.tableData[rowIndex].rowSpan,
colspan: 1
}
}
if (columnIndex === 1) {
return {
rowspan: this.tableData[rowIndex].rowSpan2,
colspan: 1
}
}
}
}
}
</script>