antd for vue tsx render table

table demo

private renderContent(value:any, record: any, index: number) {
  const obj = {
    children: value,
    attrs: {},
  };
  if (index === 4) {
    obj.attrs.colSpan = 0;
  }
  return obj;
};

public nameRender(text: string, record: any, index: number){
  
  if (index < 4) {
          return <a href="javascript:;">{text}</a>;
        }
        return {
          children: <a href="javascript:;">{text}</a>,
          attrs: {
            colSpan: 5,
          },
        };
}

private telRender(value: string, row: any, index: number)  {
        const obj = {
          children: value,
          attrs: {},
        };
        if (index === 2) {
          obj.attrs.rowSpan = 2;
        }
        // These two are merged into above cell
        if (index === 3) {
          obj.attrs.rowSpan = 0;
        }
        if (index === 4) {
          obj.attrs.colSpan = 0;
        }
        return obj;
      }

public columns: any[] = [{
      title: 'Name',
      dataIndex: 'name',
      customRender:this.nameRender,
    }, {
      title: 'Age',
      dataIndex: 'age',
      customRender: this.renderContent,
    }, {
      title: 'Home phone',
      colSpan: 2,
      dataIndex: 'tel',
      customRender: this.telRender,
    }, {
      title: 'Phone',
      colSpan: 0,
      dataIndex: 'phone',
      customRender: this.renderContent,
    }, {
      title: 'Address',
      dataIndex: 'address',
      customRender: this.renderContent,
    }];

templace

<a-table :columns="columns" :dataSource="data" bordered>
    </a-table>