el-table表格 合并相同数据的列展示数据

效果图

<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>