Ant Design of Vue之表格中合并单元格

1. 在需要进行合并单元格的列配置中，增加如下内容：
   rowSpan属性为该单元格所要占的行数，rowSpan的取值，使用行的【key+‘Span’】值，该值将在后面提供的函数中进行计算，如果有多列需要合并，按样式增加customRender 属性即可。

{
  title: '分类',
  dataIndex: 'category',
  key: 'category',
  customRender: (value, row, index) => {
     const obj = {
       children: value,
       attrs: {}
     }
     obj.attrs.rowSpan = row.categorySpan
     return obj
  }
}

2.单元格合并函数（主要用于计算rowSpan的值）

// 需要计算合并的数据，需要合并的列key(数组，支持多个key)
    mergeCell (data, keys) {
      let tempValue = ''
      for (let kIndex = 0; kIndex < keys.length; kIndex++) {
        const key = keys[kIndex]
        const spanKey = key + 'Span'
        for (let i = 0; i < data.length;) {
          var rowSpan = 0
          if (tempValue[key] !== data[i][key]) {
            tempValue = data[i][key]
            for (let j = i; j < data.length; j++) {
              const item = data[j]
              if (item[key] === tempValue) {
                rowSpan += 1
              } else {
                break
              }
            }
          }
          data[i][spanKey] = rowSpan
          for (let j = i + 1; j < i + rowSpan && j < data.length; j++) {
            data[j][spanKey] = 0
          }

          i += rowSpan
        }
      }
      // this.bmkResult = data
    }

3.在数据获取成功后，调用该函数即可：

getResult(this.id).then(res => {
   if (res.code === 0) {
      this.tableData = res.data
     // 引用类型调用，不需要返回重新赋值
      this.mergeCell(this.tableData, ['category', 'target'])
   }
}