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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
python实现屏保计时器的示例代码
2018/08/08 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
EJB timer的种类
2014/10/28 面试题
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书