antd表格组件嵌套表格 expandedRowRender 为什么出现多余空白列？

最新推荐文章于 2025-03-26 22:45:26 发布

TPCheng

最新推荐文章于 2025-03-26 22:45:26 发布

阅读量2.8k

点赞数

分类专栏： react antd 表格文章标签： reactjs 前端 javascript

本文链接：https://blog.csdn.net/weixin_43801428/article/details/109841002

版权

react 同时被 3 个专栏收录

4 篇文章

订阅专栏

antd

2 篇文章

订阅专栏

表格

1 篇文章

订阅专栏

本文介绍了一种使用 React 实现的表格嵌套展示方法，通过在父级表格中嵌入子表格来显示层级数据。该方法利用了 Table 组件的 expandedRowRender 和 onExpand 属性，实现了子表格的动态加载与展开折叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码是这么写的

	expandedRowRender = (record, index) => {
        let children = JSON.parse(JSON.stringify(record.children));
        return <Table columns={this.state.columns2} dataSource={children} pagination={false}/>;
        
    };
    onExpand =(expanded, record)=>{
        console.log(expanded, record);
        let index = '';
        let sorts = this.state.sorts;
        for (let i = 0; i < sorts.length; i++) {
            if(sorts[i].mtId == record.mtId){
                index = i
            }
        }
        if (expanded === false) {
            console.log("合并！");
            if(index!==''){
                sorts[index].children = [];
                 // 表格数据
                this.setState({
                    sorts
                });
            }
        } else {
            this.setState({ loading: true })
            // 查询参数
            let obj = {
                mId : this.state.meetIngData.mId,
                mfType : 1,
                mtId:record.mtId,
                page : 1,
                rows : 10000,
            }
            postfn('/meeting/qryPgMeetingFileAndFileType', obj).then(res => {
                this.setState({ loading: false })
                if (res.data.resCode === '1') {
                    res.data.rows.forEach((item,index)=>{
                        item.key  = index;
                    });
                    if(index!==''){
                        sorts[index].children = res.data.rows;
                         // 表格数据
                        this.setState({
                            sorts
                        });
                    }
                    console.log('files',res.data.rows);
                } else {
                    message.error(res.data.resMsg)
                }
            }).catch((err) => {
                message.warn('网络错误,请重试')
                console.log('err',err);
                this.setState({ loading: false })
            })
        }
    }
    render() {
        let { columns,sorts} = this.state;
        return (
            <div> 
                <div className="">
                <Table
                    className="components-table-demo-nested"
                    expandedRowRender={this.expandedRowRender}
                    onExpand={this.onExpand}
                    columns={columns}
                    dataSource={sorts}
                />
                </div>
            </div>
        );
    }

渲染的结果是
在这里插入图片描述
展开后

多余的列