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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
javascript 面向对象 function类
May 13 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
js对象基础实例分析
Jan 13 Javascript
javascript中var的重要性分析
Feb 11 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
JS document文档的简单操作完整示例
Jan 13 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
PHP字符串处理的10个简单方法
2010/06/30 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python自动化测试实例解析
2014/09/28 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
七一党建活动方案
2014/01/28 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
领导党性分析材料
2014/02/15 职场文书
会计演讲稿范文
2014/05/23 职场文书
婚前财产协议书范本
2014/10/19 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
特种设备安全管理制度
2015/08/06 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis