el-table-组件多列合并单元格，可以指定某列

正文

1. 源码

<template>
  <div>
<!--   指定 count 取默认属性   -->
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <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>
<hr />
<!--   指定 props   -->
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod2"
      border
      style="width: 100%">
      <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>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "王小1虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10
        },
        {
          id: "12987121",
          name: "王小虎",
          amount1: "324",
          amount2: "4.43",
          amount3: 12
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "621",
          amount2: "1.9",
          amount3: 9
        },
        {
          id: "12987125",
          name: "王小21虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17
        },
        {
          id: "12987126",
          name: "王小2虎",
          amount1: "539",
          amount2: "2.2",
          amount3: 15
        }
      ],
      mergeResult: [],
      mergeResult2: [],
      props: ["name", "amount2"]
    };
  },
  created() {
    // 指定 count 取默认属性
    this.mergeResult = this.mergeColumnCells(this.tableData, 2);
    // 指定 props
    this.mergeResult2 = this.mergeColumnCells(this.tableData, 0, this.props);
    console.log(this.mergeResult);
    console.log(this.mergeResult2);
  },
  methods: {
    /**
     * 多列合并单元格，可以指定某列，下面的 count 和 props 参数，虽然都是非必须的，但是至少得保证有一个
     * @param {Array} data 需要处理的数据
     * @param {Number} count 非必须参数：需要合并单元格的列的总数量（满足从初始第一列至连续的 count 列的条件）
     * @param {Array} props 非必须参数：需要合并单元格的数据列对应的属性列表，示例：['id','name']
     * @returns {Array} 储存嵌套的每一列需要合并单元格的合并的格数，示例：[[1,1,2,0,1],[1,2,0,1,1]]
     * 两种不同方式的调用示例：
     * 指定 count 取默认属性：this.mergeResult = this.mergeColumnCells(this.tableData, 2);
     * 指定 props：this.mergeResult = this.mergeColumnCells(this.tableData, 0, this.props);
     * 完整的在线示例地址 [element table 多列合并单元格，可以指定某列](https://codepen.io/sunxiaochuan/pen/wvoOXzG)
     */
    mergeColumnCells(data, count, props) {
      if (data && data.length && (count || props)) {
        // 先获取到需要合并的属性列表
        props = props || [];
        // 不存在的话就依照 count 字段开始取默认名称
        if (!props.length) {
          for (const key in data[0]) {
            if (data[0].hasOwnProperty(key)) {
              props.push(key);
            }
            if (props.length === count) {
              break;
            }
          }
        }
        let saveData = [];
        for (let index = 0; index < props.length; index++) {
          const prop = props[index];
          // 设置初始化值
          saveData[index] = [];
          let dataList = saveData[index];
          // 数据计算
          for (let i = 0; i < data.length; i++) {
            const element = data[i];
            // 逻辑：默认的第一条 i === 0 数据将初始化单元格数量为 1，从第二条 i === 1 数据开始与上一条数据开始做属性比较，一致的话上一个单元格 += 1，相应的当前单元格需要置为 0，否则为默认值 1
            if (i === 0) {
              dataList.push(1);
            } else {
              // 判断与上一条数据对应的属性值是否一致，如果是的话上一个单元格需要自增 1，并设置当前的单元格为 0，否则为 1
              const prev = data[i - 1];
              if (element[prop] === prev[prop]) {
                dataList[i - 1] += 1;
                dataList.push(0);
              } else {
                dataList.push(1);
              }
            }
          }
        }
        return saveData;
      } else {
        return [];
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 2) {
        const _row = this.mergeResult[columnIndex][rowIndex];
        return [_row, 1];
      }
    },
    //         指定 props
    arraySpanMethod2({ row, column, rowIndex, columnIndex }) {
      const index = this.props.indexOf(column.property);
      if (index != -1) {
        const _row = this.mergeResult2[index][rowIndex];
        return [_row, 1];
      }
    }
  }
}
</script>

“后”言

codepen 在线示例：element table 多列合并单元格，可以指定某列