el-table合并单元格

运行结果：

template标签：

<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
  border
  height="70%"
  style="width: 100%">
  <el-table-column
    v-for="(item,index) in labelData"
    :key="index"
    :prop="item.name"
    :label="item.label"
    :resizable="false"
    width="150"
  >
  </el-table-column>
</el-table>

script标签：

//data部分
data（）{
    return {
        //表头数据
        labelData: [
            {
              name: 'devName',
              label: '设备名称'
            },
            {
              name: 'targetName',
              label: '监测点名称'
            },
            {
              name: '00:05',
              label: '00:05'
            },
            {
              name: '00:10',
              label: '00:10'
            },
            {
              name: '00:15',
              label: '00:15'
            },
        ], 
        
         //表格数据
        tableData: [
            {
                devName:"1",
                targetName: "P",
                '00:05': "23.00",
                '00:15': "23.03",
                '00:10': "23.02",
              },
              {
                devName:"1",
                targetName: "P",
                '00:05': "23.00",
                '00:15': "23.03",
                '00:10': "23.02",
              },
              {
                devName:"1",
                targetName: "Q",
                '00:05': "34.00",
                '00:10': "23.02",
                '00:15': "23.03",
              },
              {
                devName:"2",
                targetName: "P",
                '00:05': "34.10",
                '00:10': "23.02",
                '00:15': "23.13",
              },
              {
                devName:"2",
                targetName: "P",
                '00:05': "34.10",
                '00:10': "23.02",
                '00:15': "23.13",
              },
              {
                devName:"3",
                targetName: "la",
                '00:05': "23.00",
                '00:10': "23.02",
                '00:15': "23.03",
              },
              {
                devName:"3",
                targetName: "Q",
                '00:05': "34.00",
                '00:10': "23.02",
                '00:15': "23.03",
              },
        ],
    }
},

methods:{
    //合并方法
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
        //判断是否为第一列
      if (columnIndex == 0) {
        //合并相同的名字
        let nameSpan = this.getSpanNumber(this.tableData, "devName"); //"devName"是要合并的属性名
        return {
          rowspan: nameSpan[rowIndex],
          colspan: 1,
        };
      }
      
      //判断是否为第二列
      if (columnIndex == 1) {
        //合并相同的名字
        let nameSpan = this.getSpanNumber(this.tableData, "devType"); //"devType"是要合并的属性名
        return {
          rowspan: nameSpan[rowIndex],
          colspan: 1,
        };
      }
    },
    //获取要合并的行数,可以直接拿来用，需要在上面方法中调用
    getSpanNumber(data, prop) {
      //data要处理的数组，prop要合并的属性，比如name
      //数组的长度，有时候后台可能返回个null而不是[]
      let length = Array.isArray(data) ? data.length : 0;
      if (length > 0) {
        //用于标识位置
        let position = 0;
        //用于对比的数据
        let temp = data[0][prop];
        //要返回的结果
        let result = [1];
        //假设数据是AABCC，我们的目标就是返回20120
        for (let i = 1; i < length; i++) {
          if (data[i][prop] == temp) {
            //标识位置的数据加一
            result[position] += 1;
            //当前位置添0
            result[i] = 0;
          } else {
            //不相同时，修改标识位置，该位置设为1，修改对比值
            position = i;
            result[i] = 1;
            temp = data[i][prop];
          }
        }
        //返回结果
        return result;
      } else {
        return [0];
      }
    },
 }