ant design 嵌套子表格 点击新的子表格收起原展开的子表格

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

#ant-design #react #嵌套子表格

本文介绍了如何在Ant Design的React组件中实现嵌套子表格的功能，特别是利用onExpandedRowsChange和expandedRowKeys参数来控制子表格的展开与收起状态。通过参考相关博客，提供了代码示例来帮助理解这一操作。

最关键的两个参数就是onExpandedRowsChange和expandedRowKeys
参考博客https://blog.youkuaiyun.com/wangxu000000/article/details/115304817
代码仅供参考

const [expandedRowKeys, setExpandedRowKeys] = useState([''])

//展开当前行 关闭另一行
  const expandRows = (rows
最低0.47元/天 解锁文章
Antd4 Table组件折叠收缩功能
Dandelion529_66的博客
09-16 3421
Antd4 Table组件折叠收缩功能
ant-design-vue表格嵌套子表格，实现子表格有数据才显示左侧加号图标
warm water
02-06 1281
嵌套子表格，子表格无数据不显示加号，然后点击加号只显示当前的，关闭其他。希望对你有帮助！
React antd 表格嵌套表格（可展开）
m0_63788547的博客
08-27 1239
React antd 表格嵌套表格（可展开）
ant design vue 嵌套table 的使用以及 expand事件
qq_44883077的博客
10-21 7155
弹窗原型 **需求：在点击展开图标(+)时，要根据当前列的 变量编号 查询接口。但是expand事件只会获取当前展开行的数据，所以会造成在展开多行，调用查询接口时，传入了相同的 变量编号 ，从而得到相同的数据列表，参见下图 expand(expanded, record)事件提供了两个参数： expanded： 当前行展开 还是 关闭 record： 当前行数据 展开功能配置提供了 expandRowKeys 属性，可以通过该属性，解决以
ant-design嵌套子表格实现每次只展开一个子表格（点击新的子表格收起原展开的子表格）
wangxu000000的博客
03-29 5509
又遇到问题，记录一下吧，希望给同踩坑的小白一些帮助 首先功能需求：点击新的子表格收起原展开的子表格 解决问题的关键点：重新setexpandedRowKeys的值 这个解决问题的点大家都能想到，主要是在什么时候去set这个值 下边是API里边的描述，我们使用这个参数就可以解决问题了 onExpandedRowsChange 展开的行变化时触发 function(expandedRows) expandedRowKeys 展开的行，控制属性 string[] ...
2024年前端最新Ant Design Vue子表格展开只展开一行，其他行折叠，2024年不想被公司优化
2401_84433974的博客
05-06 1020
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
antDesign树形表格或者额外展开行-子父级表格默认展开行
Sunny_lxm的博客
10-24 4552
antDesign子父级表格默认展开行
antd嵌套表格遇到的小问题
lanseguhui的博客
05-25 1308
antd的api中嵌套表格的数据在expandedRowRender方法中，但是使用的时候不能在这个方法中进行ajax请求，expandedRowRender 实际上是在 Table 组件的 render 方法中调用的，React render 中用 ajax 会造成重复调用的问题，ajax -> setState -> render -> ajax-> setState -> render，循环往复。在expandedRowRender中进行render返回标签，在onExp
antdv Table组件展开行数据对齐表头（自定义表头）
agua001的博客
04-07 5773
antdv Table组件展开行数据对齐表头（自定义表头）
antd design Menu菜单下拉回调以及下拉列表时只能显示一个列表，其余关闭
qq_28621299的博客
09-05 6615
我做的是一个显示全国省市区的下拉列表：如下图 这个下拉列表是三层嵌套的下拉列表，统计列表不能同时打开，一次只能点开一个。点击下拉时触发函数获得下一层级的下拉数据。 代码如下： `render（）{“ let city=this.state.cityList.map(itemss=>( ...
react + antdesign table组件合并行，展开子表格
qq_44307861的博客
03-08 989
react+antdsign,表格合并行列，展开子表格，嵌套子表格
vue2数据嵌套过深，导致页面数据不刷新的问题
coding...
11-28 5071
vue2数据嵌套过深，导致页面数据不刷新的问题
Ant Design Vue子表格展开折叠及传值
陈新科的博客
09-26 5369
首先这是你想实现的效果嘛？ 如果是的话看这篇就够了，我会写的很详细！ 第一步在表格里插入一个表格 <a-table :expandRowByClick="true" :columns="columns" :data-source="datas" :loading="loading" @expand="zi" > <template #expandedRowRender="{ record }"> <a-table.
Ant Design Vue中 a-table 嵌套子表格
weixin_73077230的博客
05-22 3029
需求：在父表格中嵌套子表格，当点击展开某一行时，有展开的关闭当前展开行。使用a-table中的expandedRowKeys 属性和expand 方法。expand：这个可以接受两个参数，一个是是否展开，另一个是当前行的数据Function(expanded, record)。expandedRowKeys：这个主要是控制展开某行，它是一个数组形式，
antd Table 展开行可全部展开或关闭
热门推荐
赵乘风_i
12-18 1万+
有一个需要实现的需求： 可展开表格 可以全部展开或关闭。如下： 技术实现前提： React + antd Table + Hooks + tsx 在 antd Table 上并没有找到这个属性，所以就自己上手来解决一下咯。 实现思路： 写一个同级的 div ,设置其css属性，让它绝对定位到 父表格对应的th上 设置其打开或关闭的显隐 使Table的所有 keys 可控 完善细节 总体...
antd树型表格的逐级展开折叠（每次展开都只展开到当前未展开的最小层级，每次折叠都只折叠到当前未折叠的最大层级）
一枚不断学习的小码农一枚~
10-09 1379
如遇到每级展开层级不一致的，如【2级2】展开到第3级，那此时点击展开，所有已展开的不动，将未展开到第3级的其他元素全部展开到第3级。此时需要注意，我们应把没有子元素的【1级】，及末级均去掉，不参与折叠展开事件。折叠同理：如下，【2级2-1】收起，但当前未折叠的最大层级为【5级】需求有些变态，我们用一段话和一张图来演示下。再点击收起：【4级】收起。效果如下：所有3级展开。效果如下：【5级】收起。
自定义antd table子表格的展开和收起，一键展开收起
微光的博客
04-07 6498
效果： 代码： import React from 'react'; import {Table} from 'antd'; const key = []; // 定义一个空的数组。 export default class xiaoyu extends React.Component { constructor(props) { super(props); this.state = { open: false, ..
弹窗嵌套表格（表格可点击展开收起）
include_computer的博客
09-03 567
<template> <div> <el-dialog :visible.sync="dialogDetailInfo.show" width="48%" class="setDialog" :destroy-on-close="true" :modal-append-to-body="false" @close="closeDialog" > <div clas
vue antd a-table表格 按需展开嵌套子表格
小白成长记
07-22 2651
属性来给不满足条件的行增加特定的class名，配合css样式的displaynone实现展开图表的隐藏。row-class-name="record=>不展开的条件&&'noExpand'"在满足某一条件下，表格行可展开子表格。不满足条件的时候不能点击。不能点击不好实现，但可以实现让其隐藏，通过表格的。......
antdesign 嵌套子表格fixed
最新发布
10-09
Ant Design 的嵌套子表格（Nested Table）是指在一个表格组件内展示另一个表格的数据结构。当涉及到固定列（`fixed`）时，你可以设置父表头（`parentHeader`）的 `onCell` 属性，通过这个属性来控制子表格的内容区域如何响应滚动。固定列功能通常用于需要保持某些列始终可见的场景，比如表头或侧边导航。 要实现在 Ant Design 中嵌套子表格并让某个列固定，可以按照以下步骤操作： 1. 首先，创建一个父表格组件，它包含子表格的引用和列配置，包括你想固定的列的索引。 ```jsx import { Table, Column } from 'antd'; import { List } from 'antd'; const ParentTable = () => { const columns = [ // 父表头列 ...otherColumns, { title: '子表格', dataIndex: 'childData', // 子表格数据字段 render: (text) => ( <List dataSource={text} renderItem={({ item })}> {/* 子表格内容 */} <Table fixed> {/* 子表格列配置 */} </Table> </List> ), onCell: ({ record }) => ({ children: [{ fixed: 'left' }] // 设置子表格左侧固定列 }), }, ]; return <Table columns={columns} />; }; ``` 2. 在子表格中，你需要提供数据源，并配置列（可能包括固定列）。 注意，这里的 `fixed` 可能会有一些局限性，因为 `List` 并不是直接支持 `fixed` 属性。如果你需要更精确的控制，可能需要使用第三方库或者其他方法调整样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值