解决ant-design-vue组件，行合并问题，动态行合并

 官方文档写到将rowSpan设置为0时此单元格不会渲染，row：行，span可以理解为栅格布局占有几行。

 

 解决思路： 将想要合并的行数的第一行设置要合并的范围，之后的单元格不进行渲染。
所以第一行就可以设置rowSpan：3，第二行就是rowSpan：0，第三行就是rowSpan：0，以此类推。

但是真是的代码肯定不能这样写，可以去动态的方式去获取合并几行。
思路：
        1、首先给数组排序(以你想要合并的某个字段去排序)
        2、在表格渲染的时候去遍历数组，获取到要合并数组的第一行以及有几行要合并的

 const mergeCells = (text, data, key, index) => {
      // 上一行该列数据是否一样
      if (index !== 0 && text === data[index - 1][key]) {
        return 0
      }
      let rowSpan = 1
      // 判断下一行是否相等
      for (let i = index + 1; i < data.length; i++) {
        if (text !== data[i][key]) {
          break
        }
        rowSpan++
      }
      return rowSpan
    } 

columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          rowSpan: 0,
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Home phone',
          dataIndex: 'tel',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            }
            obj.attrs.rowSpan = mergeCells(value, this.loadData, 'tel', index)
            return obj
          },
        },
]

customRender  是一个自定义函数，也可以返回jsx类型，拓展性很多