并）
在做项⽬中常常遇到需要合并单元格的情况，有时候是表头合并在⼀起有时候需要表格内数据合并在⼀起，也有都合并的下⾯是我设置的都合并的情况
表头合并：在column内要合并列的对象内设置colSpan:number(合并⼏个)，然后把其它被合并的column对象内设置colSpan:0(会默认不显⽰)。这样即可完成表格头的合并
表格体合并：这个需要⽤到customRender：
先看官⽹给的说明：customRender=》⽣成复杂数据的渲染函数，参数分别为当前⾏的值，当前⾏数据，⾏索引，@return ⾥⾯可以设置表格⾏/列合并,可参考 demo 表格⾏/列合并Function(text, record, index) {}|slot-scope
说明上的意思很明显，就是渲染出⼀个函数返回⼀个obj对象，在obj对象内包含⼀些本⾝属性如children,attrs. 我们只需要设置attrs.colSpan= number(想要合并的表格数)即可代码如下：
custorm = [{
// title: '产品名称', key: 'producType',
dataIndex: 'producType', width:90,
colSpan: 3,//合并表头 //⾃定义的渲染格式
customRender:(value, row, index) => {//合并⾏ 和 标题头相同 本⾏合并⼏个其它⾏⽤colSpan = 0去取消显⽰ console.log(value,row,index)//本列的值,所有⾏数据包括本列,第⼏列 const obj = {
children: value, attrs: {}, };
obj.attrs.colSpan = 3;//这⾥设置的是表格体的合并 return obj; } }, {
title: '品名规格', key: 'guige',
dataIndex: 'guige', width:180, colSpan: 0,
customRender:(value, row, index) => {
console.log(value,row,index)//本列的值,所有⾏数据包括本列,第⼏列 const obj = {
children: value, attrs: {}, };
obj.attrs.colSpan = 0; return obj; } },]
根据参数说明可以判断第三个参数是⾏数，index=第⼏⾏，根据这个的判断可以添加⾏的合并⽐如
{
title: 'Home phone', colSpan: 2, dataIndex: 'tel',
customRender: (value, row, index) => { const obj = { children: value, attrs: {}, };
if (index === 2) {
obj.attrs.rowSpan = 2; }
// These two are merged into above cell if (index === 3) {
obj.attrs.rowSpan = 0; }
if (index === 4) {
obj.attrs.colSpan = 0;
}
return obj; }, },
这样第三⾏就会和第四第五⾏合并：需要注意的是⾏和⾏的合并只有表单体合并没有表头合并
如果需要表头合并只需要在column内设置children：{设置规格和⽗级clumn⼀样}即可：（利⽤分组表头）
columns[n] 可以内嵌 children，以渲染分组表头。const column = [{ title: 'Other', children: [ {
title: 'Age',
dataIndex: 'age', key: 'age', width: 200,
sorter: (a, b) => a.age - b.age, }, {
title: 'Address', children: [ {
title: 'Street',
dataIndex: 'street', key: 'street', width: 200, }, {
title: 'Block', children: [ {
title: 'Building',
dataIndex: 'building', key: 'building', width: 100, }, {
title: 'Door No.',
dataIndex: 'number', key: 'number', width: 100, }, ], }, ], }, ], },]
因篇幅问题不能全部显示，请点此查看更多更全内容