表格单列相同字段值合并

用specName(el.specName === row.specName)和id的区别(el.id === row.id)，使用id的时候id是唯一值，判断的时候不会出现重复情况，使用specName的时候，如果有重复的值，会出现合并错位的情况。
解决方案：先按照specType进行排序，然后按specType的值进行分组，合并的规则是每一个分组的第一列进行合并{ rowspan: length, colspan: 1 }，其它列跳过{ rowspan: 0, colspan: 0 }。

<template>
    <Table :columns="columns" :data="data" border :span-method="handleSpan">
    <template #specType="{ row }">{{ specTypes[row.specType] }}</template>
  </Table>
</template>
<script>
    export default {
        data () {
            return {
              specTypes: {
                1: '烟支形式',
                2: '包装形式',
                3: '滤棒形式'
              },
                columns: [
                    {
                        title: 'Date',
                        type: 'index'
                    },
                    {
                        title: 'specType',
                        key: 'specType',
                       slot: 'specType'
                    },
                    {
                        title: 'specName',
                        key: 'specName'
                    }
                ],
                data: [
                    {
                        "specName": "标准支",
                        specType: 1
                    },{
                        "specName": "标准支",
                        specType: 1
                    }, {
                        "specName": "多元复合",
                        specType: 3
                    }, {
                        "specName": "中支",
                        specType: 1
                    }, {
                        "specName": "标准硬盒",
                        specType: 2
                    }, {
                        "specName": "细支",
                        specType: 1
                    }, {
                        "specName": "标准软盒",
                        specType: 2
                    }, {
                        "specName": "标准",
                        specType: 3
                    }
                ],
                obj: {}
            }
        },
      created () {
        // 第一步：分组排序
        this.data = this.data.map((el, idx) => {
          el.id = idx
          return el
        }).sort((a, b) => a.specType - b.specType)
        // 第二步：分类分组，为了后续单元格合并单元时所处数组索引
        this.obj = this.data.reduce((total, cur, idx) => {
          if (!total[cur.specType]) {
            total[cur.specType] = this.data.filter(el => el.specType === cur.specType)
          }
          return total
        }, {})
      },
        methods: {
            handleSpan ({ row, column, rowIndex, columnIndex }) {
                // 第三步：判断是否第二列，是进行单元格合并处理，否则正常显示(即1-1)
                // tmp===
                // const children = this.data.filter(el => el.specType === row.specType)
								if (columnIndex === 1) {
                  // 拿到当前所属分组的所有元素
                  const tmp = this.obj[row.specType]
                  // 获取当前单元格所在元素对应分组的索引
                  // 如果是当前分组的第一个元素则进行合并处理，否则直接跳过即(0)
                  const idx = tmp.findIndex(el => el.id === row.id)
                  // tmp===
                  // const idx = children.findIndex(el => el.specName === row.specName)
                  return {
                    // rowspan: idx === 0 ? children.length : 0,
                    rowspan: idx === 0 ? tmp.length : 0,
                    colspan: 1
                  }
                }
              return {
                rowspan: 1,
                colspan: 1
              }
            }
        }
    }
</script>