react ant-design 使用table嵌套子表格遇到的坑

最新推荐文章于 2024-08-27 16:05:34 发布
原创 最新推荐文章于 2024-08-27 16:05:34 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了使用AntD组件库实现嵌套表格时遇到的问题及解决方案，详细介绍了如何避免循环请求数据，优化资源消耗。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

<Table

    className="components-table-demo-nested"

    columns={columns}

    expandable={{ expandedRowRender }}

   dataSource={data}

/>

上边这是antD组件库给出的嵌套子表格的示例

不过这种情况下，如果将子表格数据请求放在expandedRowRender下会一直请求后台数据~~~~~~~

查了API，最后将请求放在onExpand里，总算没有循环请求了

不过展开和关闭都还是会请求接口，比较耗费资源

不过API中还是有答案，在onExpand的类型中有给出function(expanded, record)

由字面意思也可以得出，函数需要两个参数，第一个为是否展开，第二个为当前条目内容，好了，问题解决了

 

【React工作记录二十二】ant design实现嵌套table
geyaoisnice的博客
01-02 1118
目录 前言 导语 代码部分 第一步 第二步 总结 运行结果 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 今天页面有了一个新的需求 需要封装一个嵌套table组件 代码部分 第一步 <BaseTable rowKey="code" .
ant-design 表格固定列样式混乱问题
宅神的博客
03-08 2160
在使用 ant-design 时，要实现表格的列固定只需加 fixed 属性即可，但如果固定列不在最前面，会导致样式混乱。 所以就变成了数组的排序问题了，将符合条件的项放至数组最前，其余列相对位置不变。抽象一下： // 将数组中的偶数排在最前，并保持相对位置，期望输出： [2,4,6,1,7,3,9] let a = [1, 2, 4, 7, 3, 6, 9]; 首先想到的是暴力输出，就是两个数组分别保存偶数和奇数，最终拼起来。 // 暴力输出 let result = a.reduce((acc,
ant-design-vue表格嵌套子表格，实现子表格有数据才显示左侧加号图标
warm water
02-06 1113
嵌套子表格，子表格无数据不显示加号，然后点击加号只显示当前的，关闭其他。希望对你有帮助！
React Ant Design踩坑记：Table用splice()删除行不生效
07-10 2318
Ant Design 官方示例代码 https://ant.design/components/table/#components-table-demo-jsx 我简化一下： import React from 'react'; import { Table, Space } from 'antd'; export default class a extends React.Component { constructor(props) { super(props);
【React工作记录七十一】ant design table嵌套子表格
geyaoisnice的博客
07-19 561
react
React antd的table表格之嵌套表格
weixin_45492532的博客
07-26 4244
React antd的table表格之嵌套表格 最近做了几个pc端的后台管理需求，涉及了table中的嵌套表格，嵌套的子表格大体分为两种效果： 效果1-----点击展开新的子表格，旧的子表格关闭 效果2-----可同时展开多个子表格 效果1：嵌套表格，实现点击展开按钮，展开子表格请求接口数据，点击新的子表格收起原来的子表格效果 // 设置一个State用来储存展开的行，控制属性 const [expandedRowKeys,setExpandedRowKeys] = useState<any&gt
解决react表格嵌套主表和子表都可以新增、编辑、保存、删除
ask_baidu的博客
01-05 1583
作者查阅资料，花了几天时间，解决了多个问题。现分享出来，供大家参考。支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。（包含组件，不包含store）使用后端数据可以把测试数据删除，修改有store的地方，后端返回json，支持分页等。index.js 里有测试数据。
ant design 嵌套子表格 点击新的子表格收起原展开的子表格
优快云 分享刚编的总结
10-08 994
最关键的两个参数就是onExpandedRowsChange和expandedRowKeys 参考博客https://blog.youkuaiyun.com/wangxu000000/article/details/115304817 代码仅供参考 const [expandedRowKeys, setExpandedRowKeys] = useState(['']) //展开当前行 关闭另一行 const expandRows = (rows: any) => { const arrTemp.
ant-design嵌套子表格实现每次只展开一个子表格（点击新的子表格收起原展开的子表格）
wangxu000000的博客
03-29 5428
又遇到问题，记录一下吧，希望给同踩坑的小白一些帮助 首先功能需求：点击新的子表格收起原展开的子表格 解决问题的关键点：重新setexpandedRowKeys的值 这个解决问题的点大家都能想到，主要是在什么时候去set这个值 下边是API里边的描述，我们使用这个参数就可以解决问题了 onExpandedRowsChange 展开的行变化时触发 function(expandedRows) expandedRowKeys 展开的行，控制属性 string[] ...
react+AntDesign 之 pc端零到一
Jasmin博客
01-04 1815
react pc端项目案例
react 表格嵌套(主表和子表都可以新增、编辑、保存、删除、主表展开和分页国际化)
11-19
查阅资料，花几天时间整理的，支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。解决多个问题（包含组件，不包含store）
表格行嵌套子表格实现
03-26
Flex AdvanceDataGrid 表格行嵌套子表格实现，实现子表格显示数据功能，暂时原理实现的不完善，有需要的或者高手能帮忙细化下最好了。
使用ant组件中的表格，嵌套表格展开时数据污染，只展开当前行
qq_44294202的博客
08-24 1551
最近遇到一个棘手的问题，Ant的嵌套表格，点击一行显示子表格的相关数据，展开其他行，共享数据源，便会使所有展开的行显示相同数据! 在上网找了很多解决办法，试过都不行，Ant也没有仅展开当前行的例子，改变数据源有点复杂，所以我采取的是点击哪行就只展开该行，关闭其他行，视图上就不会影响用户体验！ 话不多说，直接上代码： 查阅了Ant的表格API，expandedRowKeys展开的行，控制属性 第一步：在表格中加上expandedRowKeys控制展开行的数据 <a-table ref='saleTa
Ant Design Vue中 a-table 嵌套子表格
weixin_73077230的博客
05-22 2666
需求：在父表格中嵌套子表格，当点击展开某一行时，有展开的关闭当前展开行。使用a-table中的expandedRowKeys 属性和expand 方法。expand：这个可以接受两个参数，一个是是否展开，另一个是当前行的数据Function(expanded, record)。expandedRowKeys：这个主要是控制展开某行，它是一个数组形式，
React antd 表格嵌套表格（可展开）
最新发布
m0_63788547的博客
08-27 1100
React antd 表格嵌套表格（可展开）
ant design table嵌套table 表格嵌套子表格，并根据条件显示不同内容，是否为可点击跳转页面的链接
sccscswwe的博客
12-20 1202
其实ant design中也有但是，这个方法贼傻，但是他可造作性抢啊，我还能固定首列之类的操作都不会影响，简直yyds。内容就是这个的标题直接上代码。
保姆级教程：Ant Design Vue中 a-table 嵌套子表格
热门推荐
m0_56118578的博客
12-16 1万+
Ant Design Vue中 a-table 嵌套子表格 及只打开一个嵌套表格的方法
Ant Design Pro 4.5嵌套表格使用，以及string转图标显示（typescript版）
シ❤゛甜虾的个人博客
08-12 2427
https://procomponents.ant.design/components/table?current=1&pageSize=5
AntDesign中Table的嵌套子表格实现-expandedRowRender插槽用法
jadetii的学习地盘
05-15 4400
要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后（父表格添加事件@expand），获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。但单纯获取数据后给子表格赋值时，数据用的是innerData定义的全局变量，数据会出现覆盖（同时点开两个父节点，对应的子表格数据相同）问题。查看上下级推广关系的数据展示，关系有好几层时，使用嵌套表格。这种情况下（单条数据中本身就含有。里面有四个参数（重点是第一个）赋给内层的table！第一个参数固定不用动。解决方法：使用键值对。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值