vue-ant-design：a-table使⽤合并单元格（表头合并，表体合
并）
在做项⽬中常常遇到需要合并单元格的情况，有时候是表头合并在⼀起有时候需要表格内数据合并在⼀起，也有都合并的
下⾯是我设置的都合并的情况
表头合并：在column内要合并列的对象内设置colSpan:number(合并⼏个)，然后把其它被合并的column对象内设置colSpan:0(会默认不显⽰)。这样即可完成表格头的合并
表格体合并：这个需要⽤到customRender：
先看官⽹给的说明：customRender=》⽣成复杂数据的渲染函数，参数分别为当前⾏的值，当前⾏数据，⾏索引，@return ⾥⾯可以设置表格⾏/列合并，可参考 demo 表格⾏/列合并
Function(text, record, index) {}|slot-scope
说明上的意思很明显，就是渲染出⼀个函数返回⼀个obj对象，在obj对象内包含⼀些本⾝属性如children,attrs. 我们只需要设置lSpan = 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: {},
};
lSpan = 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: {},
};
lSpan = 0;
return obj;
}
},
]
根据参数说明可以判断第三个参数是⾏数，index=第⼏⾏，根据这个的判断可以添加⾏的合并⽐如
{
title: 'Home phone',
colSpan: 2,
dataIndex: 'tel',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {},
};
if (index === 2) {
wSpan = 2;
}
// These two are merged into above cell
if (index === 3) {
wSpan = 0;
}
html colspan属性if (index === 4) {
lSpan = 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,
},
],
},
],
},
]
,
},]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。