antd-vue table跨行合并单元格

 效果图:

antd-vue table跨行合并单元格_第1张图片

 直接贴代码

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

antd-vue table跨行合并单元格_第2张图片 

 

你可能感兴趣的:(vue,antd-vue,table,antd表格跨行合并单元格)