antd-vue table表头行合并

在官网是不支持表头的行合并的：

表头只支持列合并，使用 column 里的 colSpan 进行设置。
表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

所以只能自己想办法了,用了一个比较low的思路：把需要合并的单元格拆分为n个单元格(flex布局使之垂直排列),然后在每行加上border-bottom

let theadSolts = [{
  type: 'filed9Title',
  labels: ['二级9-1', '二级9-1']
}]

const columns = [
  {
    title: 'main table',
    align: 'center',
    children: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: '50px'
      },
      {
        title: '字段1',
        children: [
          {
            title: '二级1',
            dataIndex: 'filed1',
            key: 'filed1',
            align: 'center'
          }
        ]
      },
      {
        title: '字段2',
        children: [
          {
            title: '二级2',
            dataIndex: 'filed2',
            key: 'filed2',
            align: 'center'
          }
        ]
      },
      {
        title: '字段3',
        children: [
          {
            title: '二级3',
            dataIndex: 'filed3',
            key: 'filed3',
            align: 'center'
          }
        ]
      },
      {
        title: '字段4',
        children: [
          {
            title: '二级4',
            dataIndex: 'filed4',
            key: 'filed4',
            align: 'center'
          }
        ]
      },
      {
        title: '字段5',
        children: [
          {
            title: '二级5',
            dataIndex: 'filed5',
            key: 'filed5',
            align: 'center',
            width: '100px'
          }
        ]
      },
      {
        title: '字段6',
        children: [
          {
            title: '二级6',
            dataIndex: 'filed6',
            key: 'filed6',
            align: 'center'
          }
        ]
      },
      {
        title: '字段7',
        children: [
          {
            title: '二级7',
            dataIndex: 'filed7',
            key: 'filed7',
            align: 'center'
          }
        ]
      },
      {
        title: '字段8',
        colSpan: 0,
        children: [
          {
            title: '二级8',
            dataIndex: 'filed8',
            key: 'filed8',
            align: 'center'
          }
        ]
      },
      {
        title: '字段9',
        children: [
          {
            // title: '二级9',  // 不能设置title
            dataIndex: 'filed9',
            key: 'filed9',
            align: 'center',
            width: '150px',
            slots: { title: 'filed9Title' },
            className: 'thead-row-wrap' // 用于筛选表头行合并
          }
        ]
      }
    ]
  }
]
const data = []
for (let i = 0; i < 5; i++) {
  data.push({
    index: i + 1,
    filed1: 'filed1' + (i + 1),
    filed2: 'filed2' + (i + 1),
    filed3: 'filed3',
    filed4: 'filed4',
    filed5: i * 2,
    filed6: i * 3,
    filed7: (i * 6 + 0.66).toFixed(2),
    filed8: (i * 3 + 0.33).toFixed(2),
    filed9: (i + 0.22).toFixed(2)
  })
}
// 计算合计
let sumDict = {}
data.map(row => {
  for (let key in row) {
    let value = parseFloat(row[key])
    if (isNaN(value)) {
      sumDict[key] = '一'
    } else {
      if (!sumDict[key]) {
        sumDict[key] = value
      } else {
        sumDict[key] = parseFloat(sumDict[key]) + value
      }
      sumDict[key] = String(sumDict[key]).indexOf('.') !== -1 ? parseFloat(sumDict[key]).toFixed(2) : sumDict[key]
    }
  }
})
sumDict['index'] = '合计'
data.push(sumDict)

export default {
  name: 'test',
  data () {
    return {
      data,
      columns,
      theadSolts
    }
  },
  mounted () {
  },
  methods: {}
}

<a-table
  :columns="columns"
  :data-source="data"
  :pagination= false
  bordered
  size="middle"
  rowKey="index"
  class="row-change-table"
>
  <template :slot="item.type" v-for="(item, index) in theadSolts" >
    <div class="row-wrap-line" :key="item.type + index">
      <span class="line-title" v-for="(label, idx) in item.labels" :key="idx">{{label}}</span>
    </div>
  </template>
</a-table>

注意要在<a-table>里加入class="row-change-table": 因为table自带padding,所以要把padding去掉,加上这个class的目的就是为了便于拿到这个dom(而且只会在该表格生效,不会全局生效)

.row-change-table{
    /deep/ .thead-row-wrap{
      padding: 10px 0!important; // 重置padding
    }
    /deep/ .ant-table-thead > tr > th .ant-table-header-column{
      width: 100%!important;  // 将单元格宽度沾满
    }
    .row-wrap-line{
      width: 100%;
      display: flex;
      flex-direction: column;
      .line-title{
        padding: 5px;
        border-bottom: 1px solid #e8e8e8;
      }
      :last-child{
        border: none;
      }
    }
  }