効果画像:
コードを直接貼り付ける
<a-table
:columns="columns" :data-source="statisticData" bordered size="small"
:pagination=false :scroll="scrollY"
:rowKey="(record,index)=>{return index}">
const columns = [
{
title: '资产',
colSpan: 3,
align:'center',
customRender: ( text,record, index ) => {
const obj = {
children: '',
attrs: {},
style:{}
};
if (index === 0) {
obj.children = '国土空间资源';
obj.attrs.rowSpan = 14;
obj.style.fontSize = '20px';
obj.style.fontWeight = '800';
}
else if (index === 14) {
obj.children = '物质资源';
obj.attrs.rowSpan = 25;
obj.style.fontSize = '20px';
obj.style.fontWeight = '800';
}
else{
obj.attrs.colSpan = 0;
}
return obj;
},
},
{
title: '第二列',
colSpan: 0,
align:'center',
customRender: ( text,record, index ) => {
const obj = {
children: '',
attrs: {},
style:{}
};
if (index === 0) {
obj.children = '土地资源';
obj.attrs.rowSpan = 13;
obj.style.fontSize = '18px';
obj.style.fontWeight = '700';
}
else if (index === 14) {
obj.children = '矿产资源';
obj.attrs.rowSpan = 24;
obj.style.fontSize = '18px';
obj.style.fontWeight = '700';
}else{
obj.attrs.colSpan = 0;
}
return obj;
},
},
{
title: '第三列',
colSpan: 0,
align:'center',
dataIndex: 'lc_hz',
customRender: ( text,record, index ) => {
const obj = {
children: text,
attrs: {},
style:{}
};
if (index === 13 || index === 38) {
obj.attrs.colSpan = 2;
obj.style.fontSize = '16px';
obj.style.fontWeight = '600';
}
else if (index === 39) {
obj.attrs.colSpan = 3;
obj.style.fontSize = '16px';
obj.style.fontWeight = '600';
}
return obj;
},
},
{
title: '期初',
align:'center',
children: [
{
title: '数量',
align:'center',
dataIndex: 'qcsl',
key: 'qcsl',
},
{
title: '金额',
align:'center',
dataIndex: 'qcje',
key: 'qcje',
},
]
},
{
title: '期末',
children: [
{
title: '数量',
align:'center',
dataIndex: 'qmsl',
key: 'qmsl',
},
{
title: '金额',
align:'center',
dataIndex: 'qmje',
key: 'qmje',
},
]
},
];