element-ui table 表格合并

效果如下：

需求分析：项目中有个表格需要进行合并，并且知道是15行，行数固定，1-6行第一列和第二列进行合并，7-15行第一列进行合并；第7行第二列不需要合并，第8、9行第二列进行合并，第10,11,12行第二列进行合并，第13,14,15行第二列需要合并

最终代码：

<template>
  <basic-container>
    <div>
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style=" 60%;"
      >
        <el-table-column prop="id" label=" " width="180"> </el-table-column>
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="amount1" sortable label="数值 1">
        </el-table-column>
        <el-table-column prop="amount2" sortable label="数值 2">
        </el-table-column>
        <el-table-column prop="amount3" sortable label="数值 3">
        </el-table-column>
      </el-table>
    </div>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          id: "12987122",
          name: "王小虎1",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987123",
          id: "12987123",
          name: "王小虎2",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          id: "12987124",
          name: "王小虎3",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          id: "12987125",
          name: "王小虎4",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          id: "12987126",
          name: "王小虎5",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987110",
          id: "12987110",
          name: "王小虎6",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987111",
          id: "12987111",
          name: "王小虎7",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987112",
          id: "12987112",
          name: "王小虎8",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987113",
          id: "12987113",
          name: "王小虎9",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987114",
          id: "12987114",
          name: "王小虎10",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987115",
          id: "12987115",
          name: "王小虎11",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987116",
          id: "12987116",
          name: "王小虎12",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },

        {
          id: "12987117",
          id: "12987117",
          name: "王小虎13",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987118",
          id: "12987118",
          name: "王小虎14",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987119",
          id: "12987119",
          name: "王小虎15",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
    };
  },
  methods: {
    /**
     *  需求
     *  1、表格总行数15行是固定的，需要对某些行列进行合并
     *  2、1-6行第一列和第二列进行合并
     *  3、7-15行第一列进行合并
     *  4、7行第二列不需要合并
     *  5、第8、9行第二列进行合并
     *  6、第10,11,12行第二列进行合并
     *  7、第13,14,15行第二列需要合并
     */

    //element-ui 提供表格合并的方法
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //   console.log({ row, column, rowIndex, columnIndex }, "---obj");
      //   row  --- 当前行
      //   column ----当前列
      //   rowIndex --当前行号
      //   columnIndex --当前列号

      //第一步  对第一列第1-6行数据进行操作
      if (columnIndex === 0) {
        if (rowIndex < 6) {
          // 如果行数是小于6行的
          return [1, 2]; //实现第一列和第二列进行合并
        } //因为改变了单元格的样式，所以需要对改变的单元格样式进行处理
      } else if (columnIndex === 1 && rowIndex < 6) {
        //第二列单元格1-6行受影响了，需要处理
        return [0, 0];
      }

      //第二步 对第一列第6行以外的数据进行处理
      if (columnIndex === 0 && rowIndex >= 6) {
        // 下标是从0开始的，所以第七行是6
        if (columnIndex === 0 && rowIndex === 6) {
          // 对第一列第7-15行进行合并
          return {
            rowspan: 9,
            colspan: 1,
          };
        } else {
          //因为7-15行单元格的样式改变了，会影响其他行的，需要处理
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }

      //第三步  对第二列第7-15行的数据进行处理
      if (columnIndex === 1 && rowIndex > 6) {
        if (columnIndex === 1 && rowIndex === 7) {
          //对第二列第8-9行进行合并
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          //对受影响的单元格样式进行处理
          if (columnIndex === 1 && rowIndex === 8) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }

        //第四步  对第二列第10-12行进行合并
        if (columnIndex === 1 && rowIndex === 9) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          //对受影响的单元格样式进行处理
          if ((columnIndex === 1 && rowIndex === 10) || rowIndex === 11) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }

        //第五步  对第二列第13-15行进行合并
        if (columnIndex === 1 && rowIndex === 12) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          //对受影响的单元格样式进行处理
          if ((columnIndex === 1 && rowIndex === 13) || rowIndex === 14) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
  },
};
</script>

<style lang="scss">
div {
  text-align: center; //对单元格居中对齐
}

.has-gutter tr th:first-child {
  border-right: none;  //去除第一个id的右边线条
}
.has-gutter tr th:nth-child(2) {
  .cell {
    text-align: left;  //对第二个id的
    padding-left: 0;
    margin-left: 0;
  }
}
</style>