关于ant design Table嵌套子表单，展开父表单多了空白行

最新推荐文章于 2025-02-11 11:53:30 发布

yozora999

最新推荐文章于 2025-02-11 11:53:30 发布

阅读量4.1k

点赞数

文章标签： ant design

本文链接：https://blog.youkuaiyun.com/yozora999/article/details/88727329

版权

本文围绕Ant Design展开，作者分享了子表单嵌套和空白行删除的问题及解决办法。子表单嵌套用onExpandedRowsChange方法，写入数据依具体代码逻辑，官网有案例。删除空白行利用componentDidUpdate生命周期，通过改变state值解决第二次点击展开行仍出现空白行的问题。

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

话不多说，直接上bug截图：

今天本人花了大把的时间找问题所在但是仍旧一无所获……有知道的大神可以告诉我原因吗感激不尽！

子表单如何嵌套，主要还是用了onExpandedRowsChange这个方法，展开子表单时的函数，具体怎么写入数据还是看你们的具体代码逻辑啦，这里就不过多赘述了，官网有案例，大家可以参考。

那么空白行如何删除？因为我的子表单数据是用的state，state更新之后会刷新一下组件，所以这里要用到componentDidUpdate这个生命周期（组件更新完成后调用，此时可以获取dom节点），

componentDidUpdate(){
//强行用js方法删除……
  var area = document.getElementsByClassName('ant-table-row-level-1');
  if (area.length!=0){
    for (var i = 0;i<area.length;i++){
      area[i].setAttribute('style', 'display:none');
    }
  }
}

这样每次点击展开行都会更新一下，也会走这个生命周期函数了。但是第二次点击同一个展开行的话，空白行还是会出来，这是因为state依旧是同一个state，数据没有刷新，所以在onExpandedRowsChange的时候，定义一个state，让其值每次都有改变，比如

this.setSate({visible:!this.state.visible})