elementUI的table合并

• 关于table的合并，官方给的案例及其简单，所以当项目遇到此类问题，踩坑是无法避免的，其合并原理类似html的table合并，比如我需要合并第一行到第三行，列为第一列时，其第一行的col是3，row为1，第一列的第二行第三行已被合并，则应返回col为0，row为0
• 当你返回col为1，row为1时，其进行的合并操作其实是自己合并自己，相当于没有合并

<el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="categoryName" label="品类名称" align="center" width="180" />
      <el-table-column prop="userName" label="选品人" align="center" />
      <el-table-column prop="goodsId" label="商品编号" align="center" />
      <el-table-column prop="goodsName" label="商品名称" align="center" />
</el-table>




computed: {
    mergingRows() { // 表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
    // 如果是第一条记录（索引为0），向数组中加入1，并设置索引位置；
    // 如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，
    // 则向mergingRows中添入元素0，并将前一位元素+1，表示合并行数+1，
    // 以此往复，得到所有行的合并数，0即表示该行不显示。
      const mergingRows = []
      let mergingPos = 0
      for (let i = 0; i < this.tableData.length; i++) { // tabledata 表格数据源
        if (i === 0) {
          mergingRows.push(1)
          mergingPos = 0
        } else {
          if (this.tableData[i].categoryName === this.tableData[i - 1].categoryName) { // 哪些数据是要合并的 合并的条件是什么 此处合并条件为categoryName 相同则进行合并
            mergingRows[mergingPos] += 1
            mergingRows.push(0)
          } else {
            mergingRows.push(1)
            mergingPos = i
          }
        }
      }
      return mergingRows
    }
  },
  methods:{
  objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 第一列
        const _row = this.mergingRows[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
   }

方法为网友提供，做了一些修改