antd 组件库，关于table表格内列字段位置 嵌入表格的实现，不同于antd官网上table表格的嵌套子表格

由于项目需求，需要在table表格内展示更多的内容，想要在同一行内实现，而不是需要在antd示例中的嵌套子表格这样的实现方式，可以先看下最后 的实际效果图

这个设计图 很明显就是 在最后一列的内容，修改为一个table 表格的形式，行内列的 嵌套表格。

在实现的方案中可以，在最后一列render的 时候渲染为 table表格的形式，这样可以实现，但是会遇到表格的样式问题，表格会出现错位等问题，但是可以 通过样式的调整也可以修改正常。

下面是实现的代码

 import React from 'react';
 import {Table,Card,Tag } from 'antd';
 import './index.less'
 
 const column1=[
   {
     title: '汇票签发记录',
     children: [
       {
         title: '汇票号码',
         dataIndex: 'number',
         key: 'number',
         align:'center'
       },
       {
         title: '出票日期',
         dataIndex: 'dated',
         key: 'dated',
         align:'center'
       },
     ],
   },
   {
     title: '汇票审查记录',
     children: [
       {
         title: '初审结果',
         dataIndex: 'number1',
         key: 'number1',
         align:'center'
       }, {
         title: '复审结果',
         dataIndex: 'number2',
         key: 'number2',
         align:'center'
       },{
         title: '总计结果',
         dataIndex: 'number3',
         key: 'number3',
         align:'center'
       },{
         title: '状态',
         dataIndex: 'number4',
         key: 'number4',
         align:'center',
         render: (text, record, index) => {
          if (text ===1 ) {
          return  <Tag style={{marginRight:0}} color="red">作废</Tag>;
          }else{
            return  <Tag style={{marginRight:0}} color="green">签发</Tag>;
          }
         }
       },
      
     ],
   },
 ]
 const renderContent1 = (value, row, index) => {
   return <Table className='bill-two' bordered size='small' columns={column1} dataSource={row.address} pagination={false}></Table>;
 };
 
 const columns = [
   {
     title: '序号',
     dataIndex: 'key',
     render: (text, record, index) => `${index + 1}`,
   },
   {
     title: '收款人全称',
     dataIndex: 'size',
   },
   {
     title: '收款人账号',
     dataIndex: 'size1',
   },
   {
     title: '收款人开户名称',
     dataIndex: 'size2',
   },
   {
     title: '汇票金额',
     dataIndex: 'size3',
   },
   {
    title: '汇票金额',
    dataIndex: 'size5',
  },
  {
    title: '汇票金额',
    dataIndex: 'size5',
  },


   {
     title: '汇票号码',
     dataIndex: 'size4',
     fixed: 'right',
     render: (text, record, index) => <a >{text}</a>,
   },
   {
     title: '汇票签发历史信息',
     dataIndex: 'address',
     align:'center',
     fixed: 'right',
     width:'28%',
     render: renderContent1,
   },
 ];
 
 const data = [
   {
     key: '1',
     size: '收款人全称',
     size1: 801101100123321,
     size2: '银行股份有限公司',
     size3: '100.00',
     size4: '3140005120032015',
     address: [{
       number:3140005120032015,
       dated:'2021-10-15',
       number1:'',
       number2:'',
       number3:'',
       number4:1,
     },
     {
       number:3140005120032015,
       dated:'2021-10-15',
       number1:'',
       number2:'',
       number3:'',
       number4:2,
     }
   ],
   },
   
 ];
 
 export default () => {
   return <Table scroll={{ x: 1900 }}  className='bill' bordered={false} columns={columns} dataSource={data}  />;
 };