antd-vueテーブルは行間でセルをマージします

 効果画像:

 コードを直接貼り付ける

<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',
      },
    ]
  },
];

 

 

おすすめ

転載: blog.csdn.net/weixin_42217154/article/details/111354722