Ant Design Vue Table组件合并单元格方式

<template>
  <div>
    <a-table bordered :data-source="dataSource" :columns="columns"></a-table>
  </div>
</template>
<script>
const dataSource = [
  { key: '1', school: '林州一中', grade: '高一', class: '二班', name: '徐强' },
  { key: '2', school: '林州一中', grade: '高一', class: '一班', name: '林东'},
  { key: '3', school: '林州一中', grade: '高一', class: '二班', name: '李丹'},
  { key: '4', school: '林州一中', grade: '高二', class: '二班', name: '刘康'},
  { key: '5', school: '实验高中', grade: '高三', class: '二班', name: '杨江'},
  { key: '6', school: '实验高中', grade: '高三', class: '一班', name: '陈锋'},
  { key: '7', school: '实验高中', grade: '高三', class: '二班', name: '李华'},
  { key: '8', school: '实验高中', grade: '高四', class: '二班', name: '赵铭'}
]

const columns = [
  {
    title: '学校', dataIndex: 'school', width: '25%',
    scopedSlots: { customRender: 'school' }, align: 'center', key: 'school',
    customRender (_, row) {
      return {
        children: row.school,
        attrs: {
          rowSpan: row.schoolRowSpan
        }
      }
    }
  },
  {
    title: '年级', dataIndex: 'grade', width: '25%',
    scopedSlots: { customRender: 'grade' }, align: 'center', key: 'grade',
    customRender (_, row) {
      return {
        children: row.grade,
        attrs: {
          rowSpan: row.gradeRowSpan
        }
      }
    }
  },
  {
    title: '班级', dataIndex: 'class', width: '25%',
    scopedSlots: { customRender: 'class' }, align: 'center'
  },
  {
    title: '姓名', dataIndex: 'name', width: '25%',
    scopedSlots: { customRender: 'name' }, align: 'center'
  }
]

export default {
  name: 'TableMerge',
  data () {
    return {
      dataSource,
      columns
    }
  },
  methods: {
    // 合并单元格
    rowSpan (key, data) {
      const arr = data
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = data.filter(item => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0
            }))
          )
          return result
        }, [])
      return arr
    },
    // 表格合并
    mergeRowCell (data) {
      let tableData = this.rowSpan('school', data)
      tableData = this.rowSpan('grade', tableData)
      this.dataSource = tableData
    }
  },
  mounted () {
    this.mergeRowCell(this.dataSource)
  }
}
</script>

//核心是customRender这个对象
<a-table-column
data-index="logisticObj" 
width="150px" 
:customRender="mergeTable" />
//js
//children是返回的内容，attrs里面是合并的单元格公式，后面的数字是代表几行/列 ，如果被合并了的未知就用0进行占位
mergeTable(text, record, index) {
    return {
        children: text，
        attrs: {
            rowSpan:1
        },
    }
},

return {
        children: <a>text</a>，
        // 一个div   <div>text<div>
        //一个js处理了的内容   <div>{text.length}</div>
        //一个html的代码字符串 <span domPropsInnerHTML = { htmlInfoStr }></span>
        //剩下的html代码等类似
        attrs: {
            rowSpan:1
        },
    }

    children : (
        <div>
            <div class=" spanLink" 
            onClick={ () => this.yourFunction(a,b,c,d)}>
            一个带有点击事件的template
            </div>
        </div>
    )