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

2 篇文章 0 订阅
1 篇文章 0 订阅

代码是这么写的

	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>
        );
    }

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值