antd 表格嵌套获取下标索引

背景：

项目开发种有这么一个需求，需要进行表格嵌套进行数据操作，翻阅文档在antd上倒是有这样的例子，但是二级表格数据信息操作都是一模一样的，文档也没有说明如何在操作二级表格的时候如何获取到当前的一级表格行。

情况：

在操作二级表格的时候，肯定是需要知道当前一级表格的行下标索引，不然根本不知道操作的是那一行

解决：

经过一下午的折腾，总算是实现了，下面写了个简单的demo例子。不管业务怎么复杂，但核心点无非就是如何获取到当前的行下标，以及上一级的下标

例子：

import { Table } from 'antd';
import React, { useState, useEffect } from 'react';

const Index = ()=>{
    // 表格数据
    const [dataSource, setDataSource] = useState<any>([
        {
            key:'0',
            name:'张三',
            sex:'男',
            createdAt:'2021-10-12',
            childrens:[
                {
                    key:'0-0',
                    name:'李白',
                    occupation: '打野',
                    aphorism:'但愿长醉不复醒'
                }
            ],
        }
    ]);

    // 创建一个变量用于存储当前一级行下标（用于嵌套二级表格获取下标）
    let indexZ = 0;

    // 定义一级表格头
    const columns = [
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '性别', dataIndex: 'sex', key: 'sex' },
        { title: '出生日期', dataIndex: 'createdAt', key: 'createdAt' },
        { title: '操作', key: 'operation', render: (text:any, record:any, index:number) => <a onClick={ tablerowAdd.bind(this, index) }>一级表格行添加</a> },
    ];
    // 定义二级级表格头
    const columns2 = [
        { title: '人物', dataIndex: 'name', key: 'name' },
        { title: '职业', dataIndex: 'occupation', key: 'occupation' },
        { title: '格言', dataIndex: 'aphorism', key: 'aphorism' },
        { title: '操作', key: 'operation', render: (text:any, record:any, index:number) => <a onClick={ tablerowAdd2.bind(this, index) }>二级级表格行添加</a> },
    ];

    /**
     * 一级行添加
     * @param index 行下标
     */
    const tablerowAdd = (index:number)=>{
       let dataArr = [
        {
            key: `${dataSource.length}`,
            name:`张三 ${dataSource.length}`,
            sex:'男',
            createdAt:'2021-10-12',
            childrens:[
                {
                    key:`${dataSource.length}-${dataSource[index].childrens.length}`,
                    name: `李白`,
                    occupation: '打野',
                    aphorism:'但愿长醉不复醒'
                }
            ],
        }
       ];
       
       setDataSource([...dataSource, ...dataArr]);
    }

    /**
     * 二级行添加
     * @param index 二级下标行
     */
    const tablerowAdd2 = (index:number)=>{
        setTimeout(()=>{
            let dataArr = JSON.parse(JSON.stringify(dataSource));
            dataArr[indexZ].childrens.push(
                {
                    key:`${dataSource.length}-${dataSource[indexZ].childrens.length}`,
                    name: `李白${dataSource[indexZ].childrens.length}`,
                    occupation: '打野',
                    aphorism:'但愿长醉不复醒'
                }
            );
            setDataSource(dataArr);
        })
    }

    // 自定义表格额外的展开行
    const expandedRowRender = (record:any,index:any,)=>{
        // 在这个的覅添加个标签按钮 获取当前行下标(二级列表行)
        return <div onClick={()=> indexZ = index }>
            <Table 
                columns={columns2} 
                rowKey={(record:any)=> record.key}
                dataSource={record.childrens} 
                pagination={false} 
            />
        </div>
    }
    
    return (
        <Table
            className="components-table-demo-nested"
            columns={columns}
            pagination={false}
            dataSource={dataSource}
            rowKey={(record:any)=> record.key}
            expandedRowRender = { (record,index) => expandedRowRender(record, index)  }
        />
    );
}
export default Index;

复制上面的例子，跑一下就可以

image.png