antd中实现表展开行默认展示的方法 - 行业资讯 - 肥雀云

　　介绍

这篇文章运用简单易懂的例子给大家介绍antd中实现表展开行默认展示的方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强>在表中配置

 & lt;表
　　expandedRowKeys={this.store.chargeTableData。地图(项=比;item.key)}//展开的行
　　expandIconAsCell={假}
　　expandIconColumnIndex={1}
　　与//展示边框
　　defaultExpandAllRows={真}//初始时展开所有行
　　分页={{页大小:5}}//分页器
　　expandedRowRender={这个。expandedRowRender}//额外展开的行
　　列列={}//数据
　　数据源={this.store。chargeTableData}//数据数组/在

<强> antd表利用自己生成细胞结合expandedRowKeys配置,实现任意细胞控制展开列

因为项目需要,antd实现一个形如这样的表格

但是奈何翻了好几遍api文档并没有发现这样的东西,只好自己改造了,

首先表是这样的

 & lt;表
　　列={this.columns}
　　数据源={tableData}
　　有边的
　　分页={假}
　　大?& # 39;小# 39;
　　expandIconAsCell={假}
　　expandIconColumnIndex={1}
　　expandedRowRender={记录=祝辞this.expandedRowTable(记录)}
　　expandedRowKeys={this.state.expandArray}/在

实现了隐藏自带按钮,并确定了控制展开行的数组,

接下来就是控制数组了,

<强>先绑定下方法

onClick={()=祝辞this.expandTable(行)}

然后是点击细胞的方法

 expandTable=行=祝辞{
　　const过滤=this.state.expandArray
　　const文本=this.state.expandBtnText
　　如果(this.state.expandArray.includes (row.key)) {
　　filtered.splice(过滤。findIndex(元素=比;元素===row.key), 1);
　　this.expandTdNum(方法(row.key 10) & # 39;减少# 39;)
　　文本(方法(row.key 10) 1]=& # 39;详情& # 39;
　　其他}{
　　filtered.push (row.key)
　　this.expandTdNum(方法(row.key 10) & # 39;添加# 39;)
　　文本(方法(row.key 10) 1]=& # 39;关闭& # 39;
　　}
　　this.setState ({
　　expandArray:过滤、
　　})

最后控制数组的方法

 expandTdNum=(键,操作)=祝辞{
　　让temp=0
　　如果(操作===& # 39;添加# 39;){
　　临时+ +
　　}else if(操作===& # 39;减少# 39;){
　　临时——
　　其他}{
　　返回假
　　}
　　如果(key> 0,,key<7) {
　　this.setState ({
　　firstTdNum: this.state。firstTdNum +临时,
　　})
　　}else if (key> 6,,key<10) {
　　this.setState ({
　　middleTdNum: this.state。middleTdNum +临时,
　　})
　　}else if (key> 9,,key<13) {
　　this.setState ({
　　lastTdNum: this.state。lastTdNum +临时,
　　})
　　}
　　}

关于antd中实现表展开行默认展示的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。