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

话不多说,直接上bug截图:

关于ant design Table嵌套子表单,展开父表单多了空白行_第1张图片

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

子表单如何嵌套,主要还是用了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 
  

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

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

 

关于ant design Table嵌套子表单,展开父表单多了空白行_第2张图片

这样问题就解决了……我知道这个办法很无脑……但是我真的找不到出现空白行的原因

你可能感兴趣的:(关于ant design Table嵌套子表单,展开父表单多了空白行)