-
如圖
image.png
首先頭部的合并是比較容易理解的织阳，將其他的列作為它的孩子即可唧躲，如下所示：
const columns = [{
title: '費用及結(jié)算',
children: [{
title: '名稱',
dataIndex: 'serviceName',
key: 'serviceName',
}, {
title: '特殊規(guī)則',
dataIndex: 'serviceDesc',
key: 'serviceDesc',
}, {
title: '價格',
dataIndex: 'price',
key: 'price',
}, {
title: '策略',
dataIndex: 'ploy',
key: 'ploy',
}, {
title: '說明',
dataIndex: 'desc',
key: 'desc',
}],
}];
其次，我們就是最主要的合并內(nèi)部表格的部分了嵌器；(我這個方法比較笨谐丢，不過便于大家理解乾忱，后期我會查看一些例子窄瘟，修補更優(yōu)雅的方法)
- 我們合并了第二列第二行，占據(jù)四個空間（合并二行第三四五列）氏义，切從表頭開始惯悠，行數(shù)是從0開始記錄的竣况。在對應(yīng)的列下帕翻，先寫下，對應(yīng)行的合并空格數(shù)
if (index === 1) {
obj.props.colSpan = 4;
}
- 寫好不渲染空格紫岩，不渲染的空格包括泉蝌，第二行第三四五列揩晴，同理在對應(yīng)的列下硫兰，寫下不渲染的空格的邏輯（我這里就先寫一個,價格列）
{
title: '價格',
dataIndex: 'price',
key: 'price',
render(value, row, index) {
const obj = {
children: value,
props: {},
};
if (index === 3) {
obj.props.rowSpan = 0;
}
if (index === 1) {
obj.props.colSpan = 0;
}
return obj;
},
},
- 如上所示劫映，希望我的歪理，能讓你理解雌桑。
