React antd的table表格之嵌套表格

最近做了几个pc端的后台管理需求，涉及了table中的嵌套表格，嵌套的子表格大体分为两种效果：

效果1-----点击展开新的子表格，旧的子表格关闭
效果2-----可同时展开多个子表格

效果1：嵌套表格，实现点击展开按钮，展开子表格请求接口数据，点击新的子表格收起原来的子表格效果

// 设置一个State用来储存展开的行，控制属性
const [expandedRowKeys,setExpandedRowKeys] = useState<any>([''])//配置展开属性
expandable={{①onExpand ,// 请求子表格后台数据②onExpandedRowsChange,// 展开的行变化时触发③expandedRowRender, // 子表格dom部分④expandedRowKeys,// 展开的行，控制属性State的变量}}
// ①获取后台接口子表格数据const onExpand = (expanded: any, record: any) => {*****发送请求函数********};// ②展开的行变化时触发const onExpandedRowsChange=(expandedRows: any)=>{expandRows(expandedRows)}
// ③子表格dom部分const expandedRowRender=()=>{return (<div>子表格dom内容部分</div>)
}
//④点击新的子表格收起原展开的子表格
const expandRows = (rows: any) => {// 点开是['',1]   ['',2]的数组 ，最后一个是我们当前展开的行，我们最后set一个['',当前展开行的下标]到expandedRowKeys就可以实现 ‘点击新的子表格收起原展开的子表格’const arrTemp = ['']setExpandedRowKeys(arrTemp.concat(rows[rows.length - 1]))
}

效果2：嵌套表格，可同时展开多个子表格，将各个子表格loading效果和接口返回数据根据唯一标识进行数据和loading的隔离

 // 嵌套表格的loading状态const [loadingObj, setLoadingObj] = useState<any>({});// 嵌套表格全部的数据源const [tableData, setTableData] = useState<any>({});//配置展开属性
expandable={{①onExpand ,// 请求子表格后台数据③expandedRowRender, // 子表格dom部分}}// 请求后台数据const queryExpandedData = async (record: any, key: any) => {try {const table = { ...tableData };const loading = { ...loadingObj };const result: any = await ***子表格的请求***({});const data: any = result?.dataArr;table[key] = data;loading[key] = false;setTableData(table);setLoadingObj(loading);} catch (error) {console.log(error);}};// 子表格展开的点击函数
const onExpand=(expanded: any, record: any)=>{const key = record?.id;// 之前展开过if (tableData[key]?.length) return;// 第一次展开const loading = { ...loadingObj };loading[key] = true;setLoadingObj(loading);queryExpandedData(record, key);
}
// 子表格dom部分
const expandedRowRender=()=>{return (<div>子表格dom内容部分</div>)
}

React antd的table表格之嵌套表格相关推荐

phpexcel_cell 获取表格样式_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
精品推荐国内稀缺优秀Java全栈课程-Vue+SpringBoot通讯录系统全新发布! Docker快速手上视频教程(无废话版)[免费] 作者:E-iceblue https://www.cnblo ...
java操作跨页的word cell_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括如何在Word中创建嵌套表格. 对已有表格添加行或者列复制已有表格中的指定行或者列对跨页的表格可设置是否禁止跨页断行创建表 ...
Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行
本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括如何在Word中创建嵌套表格. 对已有表格添加行或者列复制已有表格中的指定行或者列对跨页的表格可设置是否禁止跨页断行创建表 ...
Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长每天凌晨00点00分, 第一时间与你相约每日英文 Destiny decides who enters your lif ...
phpWord使用模板填充数据:包含表格及嵌套表格(多个表格/循环表格)
参考文档模板处理基础使用安装过程省略,首先加载模板: $templateProcessor = new TemplateProcessor(ROOT_PATH . 'uploads/templa ...
antd表格组件嵌套表格 expandedRowRender 为什么出现多余空白列？
代码是这么写的 expandedRowRender = (record, index) => {let children = JSON.parse(JSON.stringify(record.c ...
react - antd （Table 与 Cascader 平级数据转树形实操）
如果你刚开始学习前端或者 React,将 UI 框架作为你的第一步可能不是最好的主意. (这是引用antd官网的一句话),虽然说一开始用antd作为UI框架对新手来说并不是很好,但是如果工作需要呢,那 ...
react antd 更改table 表头和表行样式
我这里以组件的形式来提供code 使实例正确运行至少需要以下知识: 1 创建react项目(本实例基于react项目) 2 知道如何导入和调用组件样式效果如下图: 实现方法目录结构: YMColl ...
react+antd 自定义table单元格属性
先把antd table的基本样式引入,在columns中需要设置单元格属性的列描述数据对象中加入onCell属性,引入css样式 import styles from './xxx.less'; c ...
react antd组件table跨行跨列
给官网上的看不懂的同行写的,毕竟我一开始也看不懂(现在也没看懂) 逻辑是在列的设置上写,通过条件判断跨行还是不跨行以及跨多少行 const columns =[title: '姓名',dataInde ...

React antd的table表格之嵌套表格

React antd的table表格之嵌套表格

React antd的table表格之嵌套表格相关推荐

最新文章

热门文章