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 23 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 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设置允许大文件上传示例代码
2014/03/10 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
用C++封装MySQL的API的教程
2015/05/06 Python
说一说Python logging
2016/04/15 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
python 画条形图(柱状图)实例
2020/04/24 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers