antd中table展开行默认展示,且不需要前边的加号操作


Posted in Javascript onNovember 02, 2020

如下所示:

antd中table展开行默认展示,且不需要前边的加号操作

前边不显示+,并且详细信息默认展开

在table中配置

<Table
 expandedRowKeys={this.store.chargeTableData.map(item => 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实现一个形如这样的表格

antd中table展开行默认展示,且不需要前边的加号操作

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

首先table是这样的

<Table 
  columns={this.columns}
  dataSource={tableData} 
  bordered 
  pagination={false}
  size='small'
  expandIconAsCell={false} 
  expandIconColumnIndex={-1}
  expandedRowRender={record=>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 && key<7){
 this.setState({
  firstTdNum:this.state.firstTdNum + temp,
 })
 }else if(key>6 && key<10){
 this.setState({
  middleTdNum:this.state.middleTdNum + temp,
 })
 }else if(key>9 && key<13){
 this.setState({
  lastTdNum:this.state.lastTdNum + temp,
 })
 }
 }

以上这篇antd中table展开行默认展示,且不需要前边的加号操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现小球的自由移动代码
Apr 22 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
jquery实现图片切换代码
Oct 13 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 #Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 #Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 #Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 #Javascript
vue element-ui中table合计指定列求和实例
Nov 02 #Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 #Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
php计算当前程序执行时间示例
2014/04/24 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Django 内置权限扩展案例详解
2019/03/04 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
小学少先队活动方案
2014/02/18 职场文书
大学生活动总结模板
2014/07/02 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android