在官网是不支持表头的行合并的:
表头只支持列合并,使用 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;
}
}
}