关于antd的Table组件的expandedRowKeys 设置后点击展开图标无法展开的问题

已于 2022-08-03 15:29:07 修改
阅读量6.2k 收藏 6
点赞数 3
分类专栏： antd的Table组件expandedRowKeys属性 文章标签： reactjs es6
于 2021-05-17 09:53:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46990115/article/details/116915796
版权

关于antd的Table组件的expandedRowKeys 设置后点击展开图标无法展开的问题

  • 在做项目的时候，想做这样一个效果：点击修改后，可以展开额外行进行修改，所以一开始的想法是动态传递一个需要展开的行的key值，但是设置之后，点击其他的展开图标没有任何反应
  • 而换成设置defaultExpandedRowKeys属性也不行，因为我刚加载页面的时候没有点击任何的修改，但是它又是初始化的时候才奏效，所以这个也没有办法

在这里插入图片描述
在这里插入图片描述

  • 所以我就想了个办法：以数据为驱动，把expandedRowKeys的值受state的控制，然后通过点击展开运算符以及修改按钮，动态地修改state里的值
    ，这样就可以完美地解决问题啦

在这里插入图片描述

  • 我们也可以输出看看expanded以及record的值：

  • expanded就是是否处于展开状态的参数

  • record就是点击的行的信息

    在这里插入图片描述

这样就可以完美地解决问题啦

无心同学
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
AOP
m0_56933752的博客
04-06 552
这里写自定义目录标题Aop简介特点动态代理使用继承(CGLIB)如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Aop简介 概念 就是将日志记录，性能统计，安全控制，事务处理，异常处理等代码从业务逻辑代码中划分出来，通过对这些行为的分离，我们希望可以将它们独立到非指导业务逻辑的方法中，进而改变这些行为的
antd表格添加数据不更新_在react项目中使用 antd-Table,实现动态表格数据修改
weixin_33622153的博客
12-23 4102
有时候在react项目中会遇到表格数据实时修改的的需求，话不多说，直接上代码。index.state.js中可以写import { observable, action, toJS } from ‘mobx’;class State {@observable data = [];@observable columns = [{title: ‘name’,dataIndex: ‘name’,widt...
Ant Design Vue的table组件设置expandedRowKeys后会导致点击图标展开和折叠行失效
sinat_34241861的博客
08-04 9156
应用场景 使用Ant Design Vue框架开发前端，要求树状table表格默认全部展开。使用 expandedRowKeys实现了该目标，但是发现table表格的图表失效了。点击图表不能折叠或展开行 解决办法 使用table组件的 @expand 事件，实现onExpand方法。onExpand即可解决问题 <template> <a-table :columns="currColumns" :dataSource="dataSource" rowKey="id" border
antd table树形表格一键展开/折叠
m0_69439101的博客
08-11 2897
antd树形表格的展开与折叠只需关注 expandedRowKeys属性 与 expandedRowsChange 事件，expandedRowKeys为表格数据id组成的数组，expandedRowsChange 表格展开与折叠时触发的回调。
2024年前端最新Ant Design Vue子表格展开只展开一行，其他行折叠，2024年不想被公司优化
最新发布
2401_84433974的博客
05-06 459
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
antdesign+vue额外展开行expandedRowRender全部展开，并隐藏expandIcon展开收起按钮；antdesign表格嵌套表格
Sunny_lxm的博客
01-04 4810
antdesign+vue额外展开行expandedRowRender全部展开，并隐藏expandIcon展开收起按钮
antd表格设置了expandedRowKeys点击加号就无法展开
reg183的专栏
03-25 4058
{categorys && categorys.length ? <Table className="m-cover-ant-table" columns={this.columns} expandIconAsCell={false} expandRowByClick={true} d..
Antd相关 Table表格自定义点击单元格(列)展开功能
若木無言
07-29 3929
@Antd 起初参考网上其它写法，符号+失效需要隐藏，点击事件需要render实现，最奇葩的是代码运行结果失败，点击没效果； 研究API进行了改良……改由单元格点击触发事件(不受render内容限制)，且+号功能可同步使用(不用隐藏)。 import React from "react"; import { Table } from "antd"; class TableEx extends React.Component { constructor(props) { super(props)
ant-design-vue:table 指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩
kassiaaaa的博客
07-17 6435
项目需求：默认展开所有树结构；（展开之后点击折叠按钮仍然可以搜索） ant-design-vue有个bug：table 指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩，然后我试了defaultExpandedRowKeys也只会在首次加载起作用 expandedRowKeys：展开的行，控制属性 字符串数组 defaultExpandedRowKeys：默认展开的行 字符串数组 两个数据类型都一样，功能相同，唯一区别时一个是默认的只会初始化加载依此，一个是可控的数组内的存值是要展开的
antd的表格树点击展开按钮无效果
weixin_40992252的博客
09-27 859
antd的表格树点击展开按钮无效果
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
<Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={true} //初始时展开...
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 Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
react + antd， ant-table中数据为异步加载时默认展开所有行的实现
lingliu0824的博客
04-28 3008
实现效果：异步加载数据完成后展开所有的行： 1.defaultExpandAllRows属性默认展开所有行，但是该属性只在第一次render的时候生效，所以异步加载的数据无法实现默认展开 2.使用expandedRowKeys属性及onExpandedRowsChange方法： 完整代码： import React, { Component } from "react"; import { Table } from "antd"; interface testProps {} interface t
关于antd defaultExpandAllRows、defaultExpandedRowKeys无效解决
weixin_60651132的博客
08-31 2630
关于antd defaultExpandAllRows、defaultExpandedRowKeys无效解决 当数据为动态获取的时候，在数据获取之后去重新渲染表格 数据为空的时候去渲染另一个表格 树形表格展开的时候，展开到最后一个层级时缩进失效......
antd table 树形数据展示 搜索子数据 展开父节点并高亮搜索出来的数据
https://github.com/lisy999?tab=repositories
02-07 942
【代码】antd table 树形数据展示 搜索子数据 展开父节点并高亮搜索出来的数据。
React antd table组件expandedRowRender属性添加后没有值隐藏展开操作的问题
jason_renyu的博客
03-23 1299
今天突然被朋友问的antd table的展开子table的问题，在根据文档操作后发现并没有问题，但是在自己操作过程中想让数据中某行不展示+符号，看了文档并没有这样的属性或者值，网上查了一下也没查到，然后就根据文档在思考了，最后看到了expandIcon 这个属性，然后就跟句这个属性来进行修改了，主要的方案就是在icon这里判断如果符合不展示的条件，就不展示这个icon就可，其他的icon就正常显示，icon回调的参数里边还给了展开关闭的方法，看来这个就是解决这个问题的方案吧。
antd table 组件列表序号翻页自增设置
08-09
antd table 组件的列表序号翻页自增设置可以通过自定义 `rowKey` 属性和 `pagination` 属性来实现。 首先需要在 `rowKey` 属性中设置一个唯一键值，可以是表格数据项中的某个字段或者是一个自动生成的 ID。例如，如果表格数据中有一个字段叫做 `id`，可以将 `rowKey` 设置为 `rowKey={record => record.id}`。 然后，在 `pagination` 属性中设置 `showTotal` 属性和 `total` 属性。`showTotal` 用于自定义显示总条数的文本，`total` 用于指定总条数的数值。例如，可以设置 `showTotal={total => `共 ${total} 条数据`}` 和 `total={总条数}`，其中 `总条数` 是一个变量，表示当前表格中的总条数。 此时，当翻页切换到下一页时，序号会继续自增，不受翻页的影响。antd table 组件会根据 `rowKey` 和 `pagination` 的设置，正确地显示当前页的序号和总条数。 以上是使用 `rowKey` 和 `pagination` 属性设置antd table 组件列表序号翻页自增的方法。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无心同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值