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 相关文章推荐
JavaScript 原型与继承说明
Jun 09 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
jquery拖动改变div大小
Jul 04 jQuery
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
5 cool javascript apps
2007/03/24 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
基于Vue过渡状态实例讲解
2017/09/14 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
js实现简单扫雷
2020/11/27 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python lambda函数基本用法实例分析
2018/03/16 Python
python基础教程项目二之画幅好画
2018/04/02 Python
python Tkinter版学生管理系统
2019/02/20 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
写给妈妈的道歉信
2014/01/11 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
服装促销活动方案
2014/02/23 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
大国崛起英国观后感
2015/06/02 职场文书
2016公司年会主持词
2015/07/01 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Golang连接并操作MySQL
2022/04/14 MySQL