antd table表的全部展开

antd table组件,在项目中,出场相当频繁,样式也繁多

Now,要说的时table的展开功能

table属性 defaultExpandAllRows :初始时,是否展开所有行。以为是个王者属性,对于全部展开的需求,不要太简单哦。如此窃喜的我,却因此掉到自己挖的坑中。

开发第一步是画界面,mock数据填充。由于需求要求初始时,全部展开,试了下table属性 defaultExpandAllRows,完完全全就是想要的样子,超级开心

mock数据结束,界面数据通过接口请求来,发现,数据渲染后,所有项都是闭合的,没有展开。

于是开始一点一滴地对比mock数据时的逻辑,难道mock时,用的是children字段,才出现展开行的。现在的数据不是children字段,而我用的table属性childrenColumnName(指定属性结构的列名)造成影响了。我写了递归调用,将 指定属性结构的列名 替换为 children 字段。再看,还是不行。。。

排除了和 属性结构的列名 没关系后,开始查看数据逻辑,初始没有请求时,数据为空数组,而 table属性 defaultExpandAllRows 就是在此可起作用的,分析到此,认定了table属性 defaultExpandAllRows 根本不是什么王者属性,还得自己递归解析出数据中有展开行的rowkey, 在赋值给table属性expandedRowKeys,控制行的展开,坑,,,,呀

 

总结:

对于请求来的 table 表数据,实现展开所有行功能

table属性 defaultExpandAllRows :没用

table属性expandedRowKeys:有用,需要自己解析数据中所有展开行的[rowkey, rowkey, ...],再赋值给该属性

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值