vue+elementUi实现表格内容的合并（复杂度的三级）

方法一、

效果：

源码：

<template>
    <el-card shadow="never" class="aui-card--fill">
        <el-table :data="tableData" ref="tableData" border :span-method="objectJBXXMethod">
            <el-table-column prop="gwsn" label="网关" min-width="120" align="center">
                <template slot-scope='scope'>
                    {{scope.row.gwsn}}
                </template>
            </el-table-column>
            <el-table-column prop="dsPort" label="串口" min-width="120" align="center">
                <template slot-scope='scope'>
                    {{scope.row.dsPort}}
                </template>
            </el-table-column>
            <el-table-column prop="content" label="设备" min-width="180" align="center">
                <template slot-scope='scope'>
                    {{scope.row.dsName}}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" min-width="60" align="center"></el-table-column>
        </el-table>
    </el-card>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [
          {
            gwsn: 'Anet',
            dsPort: 'com1',
            dsName: '1#',
            address: 1
          },
          {
            gwsn: 'Anet',
            dsPort: 'com1',
            dsName: '局放',
            address: 2
          },
          {
            gwsn: 'Anet',
            dsPort: 'com1',
            dsName: '噪声传感器1',
            address: 3
          },
          {
            gwsn: 'Anet',
            dsPort: 'com1',
            dsName: '噪声传感器2',
            address: 4
          },
          {
            gwsn: 'Anet',
            dsPort: 'com1',
            dsName: '烟感1',
            address: 5
          },
          {
            gwsn: 'Anet',
            dsPort: 'com2',
            dsName: '三层北',
            address: 6
          },
          {
            gwsn: 'Anet',
            dsPort: 'com2',
            dsName: '二层南',
            address: 7
          }
        ]
      }
    },

    methods: {
      getTableData () {
        let spanOneArr = [],
          spanTwoArr = [],
          concatOne = 0,
          concatTwo = 0
        this.tableData.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1)
            spanTwoArr.push(1)
          } else {
            if (item.gwsn === this.tableData[index - 1].gwsn) { //第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }

            if (item.dsPort === this.tableData[index - 1].dsPort) { //第二列和第16列需合并相同内容的判断条件
              spanTwoArr[concatTwo] += 1
              spanTwoArr.push(0)
            } else {
              spanTwoArr.push(1)
              concatTwo = index
            }

          }
        })
        return {
          one: spanOneArr,
          two: spanTwoArr
        }
      },
      objectJBXXMethod ({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0) {
          const _row = (this.getTableData(this.tableData).one)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if (columnIndex === 1) {
          const _row = (this.getTableData(this.tableData).two)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
    },

    mounted () {

    }
  }
</script>

方法二、

效果：

源码：

<template>
  <el-container
    style="
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #ffffff;
    "
  >
    <el-row>
        <!-- 测试表格 -->
        <el-table
          :data="tableData6"
          :span-method="arraySpanMethod"
          border
          style="width: 100%"
        >
          <el-table-column prop="gwsn" label="网关" width="180">
          </el-table-column>
          <el-table-column prop="dsPort" label="串口"> </el-table-column>
          <el-table-column prop="dsName" label="仪表名称"> </el-table-column>
          <el-table-column
            prop="instrumentAddress"
            label="仪表地址"
          ></el-table-column>
        </el-table>
      </el-row>
  </el-container>
</template>

<script>
export default {
  name: "KPL",
  data() {
    return {
      tableData6: [], //表格假数据
    };
  },

  methods: {
    // 模拟后台返回的假数据
    getTable() {
      this.tableData6 = [
        {
          gwsn: "Anet",
          meterUseInfos: [
            {
              dsPort: "com1",
              dsName: [
                { name: "1#" },
                { name: "局放" },
                { name: "噪声传感器1" },
                { name: "噪声传感器2" },
                { name: "烟感1" },
              ],
              instrumentAddress: [
                { address: "1" },
                { address: "2" },
                { address: "3" },
                { address: "4" },
                { address: "5" },
              ],
            },
            {
              dsPort: "com2",
              dsName: [{ name: "三层北" }, { name: "二层南" }],
              instrumentAddress: [{ address: "6" }, { address: "7" }],
            },
          ],
          time: "2020-11-30 13:00:00",
        },
      ];
      this.getIndex();
    },
    // 测试表格
    getIndex() {
      let arr = [];
      let s = 0;
      let table = this.tableData6;
      let getTable = [];
      table.forEach((item, i, data) => {
        window.count = item.meterUseInfos.length;
        if (arr.length) {
          s = arr[arr.length - 1].row + data[i - 1].meterUseInfos.length;
        }
        arr.push({
          row: s,
          index: item.meterUseInfos.length,
        });
        //遍历遇到哪级出现了数组就遍历
        if (item.meterUseInfos && item.meterUseInfos.length) {
          item.meterUseInfos.forEach((comItem, index1) => {
            if (comItem.dsName && comItem.dsName.length) {
              comItem.dsName.forEach((subItem, index2) => {
                getTable.push({
                  gwsn: item.gwsn,
                  dsPort: comItem.dsPort,
                  dsName: subItem.name,
                  count: item.meterUseInfos[index1].dsName.length,
                  instrumentAddress:
                    item.meterUseInfos[index1].instrumentAddress[index2]
                      .address,
                });
              });
            }
          });
        }
      });
      this.arr = arr;
      this.tableData6 = getTable;
    },

    //合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(window.count);
      // console.log(this.rowIndex);
      console.log(columnIndex);
      let dsPortFixed = this.tableData6[0].dsPort;
      if (columnIndex === 0) {
        if (rowIndex % this.tableData6.length === 0) {
          return {
            rowspan:
              dsPortFixed == row.dsPort
                ? this.tableData6.length + 1
                : this.tableData6.length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else {
        if (columnIndex === 1) {
          if (rowIndex % 5 === 0) {
            return {
              rowspan: 5,  //    此方法此处的有问题，无法适应多数动态的数据，建议使用第一种，普适性强！！！   喜欢
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },

    //获取当前小时
    getNowTime() {
      let now = new Date(),
        year = now.getFullYear(), //得到年份
        month = Number(now.getMonth()) + 1, //得到月份
        date = now.getDate(); //得到日期
      let time = year + "-" + month + "-" + date;
      this.dataForm.startTime = time;
    },

    //时间戳转化为日期格式13
    timestampToTime(timestamp) {
      if (String(timestamp).length == 10) {
        var unixtimestamp = new Date(timestamp * 1000);
        var year = 1900 + unixtimestamp.getYear();
        var month = "0" + (unixtimestamp.getMonth() + 1);
        var date = "0" + unixtimestamp.getDate();
        var hour = "0" + unixtimestamp.getHours();
        var minute = "0" + unixtimestamp.getMinutes();
        var second = "0" + unixtimestamp.getSeconds();
        return (
          year +
          "-" +
          month.substring(month.length - 2, month.length) +
          "-" +
          date.substring(date.length - 2, date.length) +
          " " +
          hour.substring(hour.length - 2, hour.length) +
          ":" +
          minute.substring(minute.length - 2, minute.length) +
          ":" +
          second.substring(second.length - 2, second.length)
        );
      } else {
        let currentTime = new Date(timestamp);
        let year = currentTime.getFullYear(),
          month = currentTime.getMonth() + 1,
          day = currentTime.getDate(),
          hour = currentTime.getHours(),
          minute = currentTime.getMinutes(),
          second = currentTime.getSeconds(),
          millSeconds = currentTime.getMilliseconds();
        let months = month < 10 ? "0" + month : month,
          days = day < 10 ? "0" + day : day,
          hours = hour < 10 ? "0" + hour : hour,
          minutes = minute < 10 ? "0" + minute : minute,
          seconds = second < 10 ? "0" + second : second,
          millSecondss =
            millSeconds < 10
              ? "00" + millSeconds
              : millSeconds < 100
              ? "0" + millSeconds
              : millSeconds;
        return (
          year +
          "-" +
          months +
          "-" +
          days +
          " " +
          hours +
          ":" +
          minutes +
          ":" +
          seconds +
          "." +
          millSecondss
        );
      }
    },
  },

  mounted() {
    this.getTable(); //调取表格假数据
  },

  activated() {},
};
</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.el-aside {
  color: #333;
}

.mod-info__tprjinfo >>> .el-table th {
  padding: 5px 0;
}

.active {
  color: red;
}

.scrollBar::-webkit-scrollbar {
  width: 0;
}

.aside_button {
  text-align: center;
  padding-top: 10px;
}

.aside_button .humid {
  width: 90%;
}

.lastDay {
  margin-left: 10px;
}

#orderStatistics {
  width: 100%;
  height: 300px;
}

#temcharts {
  width: 100%;
  height: 300px;
}
</style>

参考并致谢：

[1] vue实现复杂表格的合并与展示

[2] vue合并单元格合并--多列

[3] vue单元格多列合并的实现

[4] ElementUi的table组件