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 页面执行时间计算代码
Mar 04 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JavaScript函数详解
Feb 27 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php中的strpos使用示例
2014/02/27 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
django框架forms组件用法实例详解
2019/12/10 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
2015年售票员工作总结
2015/04/29 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
安全教育片观后感
2015/06/17 职场文书
草房子读书笔记
2015/06/29 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
python 中的@运算符使用
2021/05/26 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python