Antd Design table嵌套表格踩坑日志

最新推荐文章于 2023-07-27 20:28:15 发布
最新推荐文章于 2023-07-27 20:28:15 发布
阅读量1k 收藏 1
点赞数
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46441816/article/details/115047605
版权

之前有过一个嵌套表格的需求，每个子表格中的内容不同，使用antd组件实现，渲染的始终是一个数组，所有子表格的内容完全相同，在坑中很久，后来无意中看到了ProTable上的api才解决了。
在这里插入图片描述
解决办法很简单，直接使用api的request属性，发送请求，就不需要考虑当前点击的是哪个列表了
在这里插入图片描述

单某人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd的Table嵌套子表格需要注意事项（均使用函数式编程）
MODjie的博客
04-16 3328
1、父组件需要添加expanable属性：（属性具体用法参考官网：https://ant.design/components/table-cn/#expandable） 2、在子组件加载时发送请求获取子表格要展示的数据，在useEffect方法中请求，在model的effect中访问后端： 3、为了保证每一行数据展开时，子表格只展示相关的数据，子表格的dataSource属性需使用ma...
react 表格嵌套(主表和子表都可以新增、编辑、保存、删除、主表展开和分页国际化)
11-19
查阅资料，花几天时间整理的，支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。解决多个问题（包含组件，不包含store）
React antd的table表格之嵌套表格
weixin_45492532的博客
07-26 3873
React antd的table表格之嵌套表格 最近做了几个pc端的后台管理需求，涉及了table中的嵌套表格，嵌套的子表格大体分为两种效果： 效果1-----点击展开新的子表格，旧的子表格关闭 效果2-----可同时展开多个子表格 效果1：嵌套表格，实现点击展开按钮，展开子表格请求接口数据，点击新的子表格收起原来的子表格效果 // 设置一个State用来储存展开的行，控制属性 const [expandedRowKeys,setExpandedRowKeys] = useState<any&gt
Ant-Design-Pro-Components：ProTable组件后台请求实现表格嵌套。
~~~
04-26 818
Ant-Design-Pro-Components：ProTable组件后台请求实现表格嵌套。
ant design table左侧_ant.design组件Table嵌套子表格
weixin_33831535的博客
12-30 782
import React, { Component } from 'react'import { Table } from 'antd';const dataSource = [{busi_name: "指标用户1103 ",prov_name: "西藏",task_id: 7911,item: [{busi_name: "指标用户1103 ",log_id: 8955,prov_name: ...
Form.List实现多层嵌套动态添加表格antd+hooks+ts
MYG_G
11-26 3125
功能如下 1.默认无数据，点击绿色新增按钮，会动态添加条件组 2.新增的动态条件组中都有新增子组件的按钮，可以在组中，在动态添加子组件 数据结构如下： "inGroups": [ { "conGroup": [ { "xxx": null, "yyy": 1, "zzz": 1, },
Antd(Ant-design)，嵌套子表格（expandedRowRender）的异步获取数据
weixin_38289699的博客
06-29 2708
使用阿里的ant-design开源框架，要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后，获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。 如果这样写（省略无关代码）： expandedRowRender = (record) => { dispatch({ type: 'flow/getPlanList', payload: { contractId: record.contract_id, // 该参数...
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
Antd的table组件表格的序号自增操作
01-18
1，效果图 2，实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', ...Link to={{ pathname : '/info/Edit' , query : { id : ...
antd Design Table二次封装
04-26
阿里出品的Ant Design UI组件用起来可以说是很顺手的，但是用多了会发现有时候还能更高效一点，那么我就萌生了对个别组件惊醒二次封装的念头，接下来我就介绍下我二次封装的表格组件，事先说明：以下组件是基于antdV...
antd table按表格里的日期去排序操作
01-18
表格内容 根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={...
react.js ant-design中table 树结构三级嵌套时逻辑问题
weixin_47433173的博客
09-10 437
实现三级嵌套树结构时，勾选三级里的子节点时候父节点也会自动勾选，当子节点大于一项时候取消勾选某一子结构时父节点不变；当子节点只有一项时父节点也会自动取消勾选 import StandardTablePage from '@/components/StandardTablePage'; // 用户选中某一行 userSelect(record, selected, selectedRows, nativeEvent) { let { selectedRowKeys } = this.st.
解决react表格嵌套主表和子表都可以新增、编辑、保存、删除
ask_baidu的博客
01-05 1249
作者查阅资料，花了几天时间，解决了多个问题。现分享出来，供大家参考。支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。（包含组件，不包含store）使用后端数据可以把测试数据删除，修改有store的地方，后端返回json，支持分页等。index.js 里有测试数据。
React 使用 Antdesign 表格如何展示多级嵌套内容？
韩旭的博客
10-12 1303
一、如图展示表格如何展示下方嵌套的deptName 官网 二、解决方案 <Column align="center" title="部门" dataIndex={["dept", "deptName"]} />
AntDesign中Table的嵌套子表格实现-expandedRowRender插槽用法
jadetii的学习地盘
05-15 3540
要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后（父表格添加事件@expand），获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。但单纯获取数据后给子表格赋值时，数据用的是innerData定义的全局变量，数据会出现覆盖（同时点开两个父节点，对应的子表格数据相同）问题。查看上下级推广关系的数据展示，关系有好几层时，使用嵌套表格。这种情况下（单条数据中本身就含有。里面有四个参数（重点是第一个）赋给内层的table！第一个参数固定不用动。解决方法：使用键值对。
ant-table 嵌套子表格父子表格数据展示
最新发布
weixin_41693437的博客
07-27 913
ant-table 嵌套表格 父子表格数据关联
react ant-design 使用table嵌套子表格遇到的坑
wangxu000000的博客
03-19 2208
react ant-design 使用table嵌套子表格遇到的坑 <Table className="components-table-demo-nested" columns={columns} expandable={{ expandedRowRender }} dataSource={data} /> 这种情况下，如果资表数据请求放在expandedRowRender下会一直请求后台数据~~~~~~~ 查了API，最后将请求放在onExpan...
Concis组件库封装——Loading加载中
量子前端的博客
06-22 1981
一个常规的react loading组件的开发和测试
antd表格中嵌套表格数据处理
05-26
在 Ant Design 的 Table 组件中嵌套子表格，需要对数据进行一些处理。以下是一个示例： ```jsx import React, { useState } from 'react'; import { Table } from 'antd'; const data = [ { key: '1', name: '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值