蚂蚁设计递归嵌套 table 不起作用

Question

我想在 React 的组件 framework:antd 中使用递归嵌套 table，但它不是这样工作的：

import {Table, Badge, Menu, Dropdown, Icon} from 'antd';
export  default  class TreeTable extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            dataSource: [],
            nestedData: []
        }
    }



    expandedRowRender(e) {

        const nested_source = e.nest_data

        const columns = this.props.nest_columns

        return (
            <Table
                columns={columns}
                dataSource={nested_source}
                pagination={false}
                expandedRowRender={(e)=>{this.expandedRowRender(e)}}
                title={()=>"一级岗位列表"}
                showHeader={false}
                size={"middle"}
            />

        );
    }

    render() {
        const data_source = this.props.data_source.map((v, i)=> {
            return {key: i, ...v}
        })

        return (
            <div >
                <Table
                    className="components-table-demo-nested"
                    columns={this.props.columns}
                    expandedRowRender={(e)=>::this.expandedRowRender(e)}
                    dataSource={data_source}
                />
                { this.props.children }
            </div>
        )
    }


}

单击 table 上的二级加号按钮时没有任何反应，如何解决？这是一个错误吗？

Answer 1

首先我想回答你的第一个问题

is this a bug?

不，这不是 Bug。当您没有为每个 table 行设置唯一键值时，就会发生这种情况。将此代码片段添加到您的两个 "Table" 标签中。

rowKey = {e=> e._id}

例如：-

         <Table
                rowKey = {e=> e._id}
                className="components-table-demo-nested"
                columns={this.props.columns}
                expandedRowRender={(e)=>::this.expandedRowRender(e)}
                dataSource={data_source}
            />

蚂蚁设计递归嵌套 table 不起作用

ant design recursive nested table don't work

reactjs

antd