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 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
javascript实现画板功能
Apr 12 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
Jquery easyUI 更新行示例
2014/03/06 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python框架中flask知识点总结
2018/08/17 Python
django解决跨域请求的问题
2018/11/11 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
.NET概念性的面试题
2012/02/29 面试题
银行实习鉴定
2013/12/13 职场文书
大学老师推荐信
2014/02/25 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
园林技术专业求职信
2014/07/28 职场文书
政风行风评议整改方案
2014/09/15 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL