项目里遇到个需求,涉及到比较复杂的单元格合并 、嵌套表头、分组合并行、合并列等,并且数据列还是动态的,效果图如下:
可以分组设置【显示列】例如:当前组为【合同约定】,显示列为【合同节点】和【节点金额】
我们按【数据源】进行分组后,把第一组编号为【0001】的单元行合并 ,然后再插入一行【小计】,根据显示的【列数】决定合并几个【单元格】,比如我们的需求可以设置为当【合同节点】与【金额】全部显示时,显示【小计】的信息,再进行单元格合并
我们的数据源如下:
动态列数据:
const mockRowData = [
// {
// name: '合同约定',
// key: 'agree',
// handle: 'lt',
// handleValue: 2312313,
// color: '#FF811A',
// enable: true,
// checked: true,
// // disabled: true,
// checkable: false,
// hidden: true,
// children: [
{
name: '合同节点',
key: 'contractNodes',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: true,
checked: true,
type: 1,
},
{
name: '金额',
key: 'Money',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: true,
checked: true,
type: 1,
},
{
name: '节点比例',
key: 'NodeRatio',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: false,
checked: true,
type: 1,
},
{
name: '付款条件',
key: 'paymentTerms',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: true,
checked: true,
type: 1,
},
// ],
// },
// {
// name: '确认收入',
// key: 'confirmIncome',
// handle: 'lt',
// handleValue: 2312313,
// color: '#FF811A',
// enable: false,
// checked: true,
// // disabled: true,
// checkable: false,
// hidden: true,
// children: [
{
name: '成果提交日期',
key: 'submissionDate',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: false,
checked: true,
type: 2,
},
{
name: '证明文件日期',
key: 'fileDate',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: true,
checked: true,
type: 2,
},
{
name: '确认收入',
key: 'Income',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: false,
checked: true,
type: 2,
},
{
name: '确认比例',
key: 'confirmationRatio',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: false,
checked: true,
type: 2,
},
// ],
// },
// {
// name: '收款',
// key: 'receivePayment',
// handle: 'lt',
// handleValue: 2312313,
// color: '#FF811A',
// enable: false,
// checked: true,
// // disabled: true,
// checkable: false,
// hidden: true,
// children: [
{
name: '到账日期',
key: 'DateofReceipt',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: false,
checked: true,
type: 3,
},
{
name: '金额',
key: 'Money1',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: true,
checked: true,
type: 3,
},
{
name: '确认比例',
key: 'confirmationRatio1',
handle: 'lt',
handleValue: 2312313,
color: '#FF811A',
enable: false,
checked: true,
type: 3,
},
// ],
// },
{
name: '应收款',
key: 'receivables',
handle