el-table关于多行合并（部分根据id值合并）

 

 

  <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 0">
      <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
      <el-table-column prop="time1" label="开始时段" align="center">
      </el-table-column>
      <el-table-column prop="time2" label="结束时段" align="center">
      </el-table-column>
      <el-table-column prop="week" label="申报策略" align="center">
      </el-table-column>
      <el-table-column prop="date" label="平衡预度" align="center">
      </el-table-column>
      <el-table-column prop="a" label="策略电力" align="center">
      </el-table-column>
      <el-table-column prop="b" label="策略电价" align="center">
      </el-table-column>
      <el-table-column prop="c" label="阶梯段" align="center">
      </el-table-column>
      <el-table-column prop="d" label="电力" align="center">
      </el-table-column>
      <el-table-column prop="e" label="电价" align="center">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button @click="add(scope.row)" type="text" size="small">新增</el-button>
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

 data() {
      return {
        tableData: [
          {
            id: "12987123",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '1',
            d: '1223',
            e: '1223',
          },
          {
            id: "12987123",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '13',
            d: '1223',
            e: '1223',
          },
          {
            id: "12987124",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '1',
            d: '1223',
            e: '1223',
          },
          {
            id: "12987125",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '1',
            d: '1223',
            e: '1223',
          },
        ],
      };
    },

methods: {
      add(e){    
        console.log(e,"e")
      },
      del(){},
      //合并单元格调用方法
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
          /*
          表格数据：this.tableList
          判断合并行数：this.mergeColumn()
          */
          const _row = (this.mergeColumn(this.tableData).one)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      //判断合并行数
      mergeColumn(data) {
        const spanOneArr = []
        let concatOne = 0
        data.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1)
          } else {
            //name 修改
            if (item.id === data[index - 1].id) { //第一列需合并相同内容的字段
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }
          }
        })
        return {
          one: spanOneArr
        }
      },
}