这篇文章主要介绍了antd中table展开行默认展示,且不需要前边的加号操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
前边不显示+，并且详细信息默认展开
在table中配置
item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={true} //初始时展开所有行 pagination={{ pageSize: 5 }} //分页器 expandedRowRender={this.expandedRowRender} //额外展开的行 columns={columns} //数据 dataSource={this.store.chargeTableData} //数据数组 />
补充知识：antd Table 利用自己生成cell结合expandedRowKeys配置，实现任意cell控制展开列
因为项目需要，antd实现一个形如这样的表格
但是奈何翻了好几遍api文档并没有发现这样的东西，只好自己改造了，
首先table是这样的
this.expandedRowTable(record)} expandedRowKeys={this.state.expandArray} />
实现了隐藏自带按钮、并确定了控制展开行的数组，
接下来就是控制数组了，
先绑定下方法
onClick={()=>this.expandTable(row)}
然后 是点击cell的方法
expandTable = row =>{ const filtered = this.state.expandArray const text = this.state.expandBtnText if(this.state.expandArray.includes(row.key)){ filtered.splice(filtered.findIndex(element => element === row.key),1 ); this.expandTdNum(parseInt(row.key,10),'reduce') text[parseInt(row.key,10)-1] = '详情' }else{ filtered.push(row.key) this.expandTdNum(parseInt(row.key,10),'add') text[parseInt(row.key,10)-1] = '关闭' } this.setState({ expandArray:filtered, })
最后控制数组的方法
expandTdNum = (key,operation) =>{ let temp = 0 if(operation==='add'){ temp++ }else if(operation==='reduce'){ temp-- }else{ return false } if(key>0 && key6 && key9 && key<13){ this.setState({ lastTdNum:this.state.lastTdNum + temp, }) } }
以上这篇antd中table展开行默认展示,且不需要前边的加号操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
以上就是antd中table展开行默认展示,且不需要前边的加号操作的详细内容，更多请关注本站其它相关文章！
《antd中table展开行默认展示,且不需要前边的加号操作.doc》
下载本文的Word格式文档，以方便收藏与打印。
-
-
「学习笔记」gdb 调试的简单操作
gdb是一个命令行下的、功能强大的调试器。
在学习 gdb 前，我们要知道几个最基本的 cmd 命令。
cmd
首先，对于 win10 系统，我们按 Windows + R 键，打开运行窗口，在里面输入 cmd，这样就可以打开 cmd 命令窗口...
2023-08-07编程代码学习笔记,操作,调试
-
-
-
-
Django笔记三十三之缓存操作
本文首发于公众号：Hunter后端
原文链接：Django笔记三十三之缓存操作
这一节介绍一下如何在 Django 中使用 redis 做缓存操作。
在 Django 中可以有很多种方式做缓存，比如数据库，比如服务器文件，或者内存，...
2023-07-31编程代码操作,笔记,缓存
-
-
-
vue对vue-giant-tree进行节点操作
vue 项目中使用到了vue-giant-tree这个使用ztree封装的树形插件，在对其节点进行操作时遇到了无法向传统的jquery那样获取到ztreeObj；而导致了无法控制节点dom；浪费了许多时间，so特此记录一哈
Vue-Giant-Tree...
2023-07-30编程代码Vue,操作,节点
