关于ant design Table嵌套子表单，展开父表单多了空白行

最新推荐文章于 2023-12-25 10:50:34 发布
最新推荐文章于 2023-12-25 10:50:34 发布
阅读量753 收藏
点赞数 1
分类专栏： and desgin 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44435652/article/details/110499257
版权

关于ant design Table嵌套子表单，展开父表单多了空白行


在官方文档中可以发现在展示树形结构时当dataSource中存在chinldren字段会显示树形结构，所以在需要嵌套子表格时，需要将dataSource中的children字段修改或者删除（根据需求）
在这里插入图片描述
我在处理时将children字段修改为newChildren就不会出现这种情况了
在这里插入图片描述

yhwlz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端——》ant-design-vue组件的使用之三（a-table表格的行列合并）
叙传
07-01 3070
效果 代码 表头列合并 columns = { title: node.date, dataIndex: node.date, key: node.date, width: 260, children: [ { title: '上午', dataIndex: node.d
Android实现Ant Design 自定义表单组件
08-30
Ant Design是一个流行的前端UI设计语言和React库，它提供了丰富的组件，包括表单组件如Input、InputNumber、Radio、Select和Upload等。然而，尽管这些组件功能强大，但在某些特定场景下，它们可能无法完全满足...
antd table 表格在写滚动的时候会多出一行空白行
m0_66698608的博客
08-25 621
【代码】antd table 表格在写滚动的时候会多出一行空白行。
解决办法：Ant Desgin Vue中Table嵌套子表格展开异常问题
lh_seckill的博客
10-09 1221
表格支持树形数据的展示，当数据中有children字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用childrenColumnName进行配置
vue antdesign 处理a-tree组件最后一级child为空数组问题
ke_sin的博客
03-28 3018
问题：a-tree数组渲染后台接口数据，但是数据里多了一层空children，多一层children会导致多一个展开符号，页面上看着不太友好 解决：写个方法，并封装成公共的，方便使用 //在utils文件里新建了一个js文件 export function handleTreeData(data) { for (var i = 0; i < data.length; i++) { if (data[i].child.length < 1) { data[i].chil
基于vue Ant-Design 的表单设计器，快速开发.zip
最新发布
05-04
基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design ...
react ant Design手动设置表单的值操作
01-22
1.设置表单的值 this.props.form.setFieldsValue({ name:”张三”, }); 2.清空表单的值 this.props.form.resetFields(); 3.获取某一输入框的值 this.props.form.getFieldValue(‘newPassword’); 4.获取整个...
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问 了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。@ant-design/pro-table:trophy: Use ...
ant-design表单处理和常用方法及自定义验证操作
01-22
首先要说一下antdesign这个框架API和demo丰富，而且开发环境提供对应的warning来纠正用户的错误。是一个很好的组件库。 关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与...
antd表格组件嵌套表格 expandedRowRender 为什么出现多余空白列？
qq_35909965的博客
10-11 853
antd表格组件嵌套表格 expandedRowRender 为什么出现多余空白列 原来是children 惹的祸
使用Ant-design-vue处理嵌套子表格中有关展开额外行的图标问题
m0_67227361的博客
11-15 1254
关于我最近被Ant-design-vue的嵌套子表格搞疯了这件事
antd table出现空白列的问题
qiqiliuwu的博客
12-25 697
table中需要有个固定列，所以用了scroll属性，但是发现表格出现了一个空白列。原因：列都设置了固定宽度，导致所有的宽度加起来没有表格宽度长，会出现空白列。解决:建议至少留一个列不设宽度，以自适应宽度。
Antd Table使用时候数据渲染多出几行的问题
zuo_zuo_blog的博客
11-09 1047
添加行索引rowKey，rowKey后面写string是给一个赋值，但是table却是给多个加上key 不过可以使用函数：1、给函数附上_id当key；2、给函数附上当前行的index当key； 1 rowKey={(record,index)=>record._id} 2 rowKey={(record,index)=>index} ...
【ant-design-vue】 a-table表头多出来一个空列
piano_diano的博客
03-11 2898
背景 原因 scroll 的 x 设置的长度太长了 <a-table ref="table" size="middle" bordered :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" .
Ant Design Vue子表格展开折叠及传值
陈新科的博客
09-26 4787
首先这是你想实现的效果嘛？ 如果是的话看这篇就够了，我会写的很详细！ 第一步在表格里插入一个表格 <a-table :expandRowByClick="true" :columns="columns" :data-source="datas" :loading="loading" @expand="zi" > <template #expandedRowRender="{ record }"> <a-table.
ant design table 合并单元格
Zeb_YYDS的博客
09-01 1946
Ant Design table 合并行 重点是数据的准确性和规则。
React AntDesign Table 动态合并单元格（大量数据有分页时也有效）
Gentman_Dylan的博客
11-09 2963
项目场景： 老板要求有相同数据时，那一列就需要合并起来，还能怎么办，硬着 ‘头’ 去实现吧 问题描述： 看了 Ant design官方文档 的旁友可以了解到 单元格 有一个属性 rowSpan， 它的value是数字，数字越大，渲染占据的行数越多，为0时那一个单元格不会渲染，可以看看下方这个不严谨的图 由于本人有点菜鸡，所以动态合并的方法是参考了其他兄弟弄出来的，但是后面发现了个问题，他们的解决方法在有翻页的情况会出现BUG，或者是他们接收到后台的数据跟我的不一样，所以才有了这篇文章 最开始的方法是通过
vue ant a-table 嵌套子表格 刷新折叠所有的行
05-25
你可以使用 `expandedRowKeys` 属性来实现折叠/展开所有行。具体做法如下： 1. 给 `a-table` 添加一个 `ref`，例如 `tableRef`。 2. 在需要折叠/展开所有行的时候，调用 `tableRef.toggleAllExpand(expanded)` 方法，其中 `expanded` 是一个布尔值，表示是否展开。 以下是示例代码： ```html <template> <a-table ref="tableRef" :expanded-row-keys="expandedRowKeys" @expand="handleExpand"> <!-- 表格列定义 --> </a-table> <a-button @click="toggleAllExpand">折叠/展开所有行</a-button> </template> <script> export default { data() { return { expandedRowKeys: [], }; }, methods: { handleExpand(row, expanded) { if (expanded) { this.expandedRowKeys.push(row.key); } else { const index = this.expandedRowKeys.indexOf(row.key); if (index !== -1) { this.expandedRowKeys.splice(index, 1); } } }, toggleAllExpand() { this.$refs.tableRef.toggleAllExpand(!this.expandedRowKeys.length); }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值