Antd 表格合并与赋值渲染

官方文档合并列/行有一个关键属性 rowSpan和colSpan

如图：

render 中有一个默认renderCOntent函数，包含三个参数  value，row，index  一般我们想合并几行列 通过判定index==？来设置 colSpan /rowSpan的值为0  就能成功合并（renderCOntent函数是默认格式，不建议大改）

情景：

后端给了一个多维数组，首先要做的是遍历数组，push到新数组里。原因是方便 antd表格数据渲染

拿到新数组后，开始合并表格列

特别提醒：新数组中的参数名要和表格中的dataIndex 一致！

做到这一步数据基本能渲染出来，如果还想对数据进行填写累加 *** 作，那么需要植入Input组件  使用onBlur函数方法

特别提醒：40版本onBlur 时不再修改选中值，且返回 React 原生的 event 对象  我用的是316版本！

通过传入的values（row是形参）  进行判定，不为undefined时则转化为Number类型（input的值都是string，转化后方便计算value值和fraction值）

slice() 方法可从已有的数组中返回选定的元素。

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

注意:  reduce() 对于空数组是不会执行回调函数的。

最后获取的newData就是得到的累加总值。  

antd中的表格可以监听更深层次的对象。

antd 可编辑的table 组件，点击提交后数组中还会有数据，在input中使用过onInput，onChange，onBlur，ref绑定，在form表单的input框内输入的值不能被form获取，导致输入了内容依然会报未输入现象。

input框实时监听清空红色input框的数据。

1、其实难点也就是多个Tab页，每个Tab页都有单独的Form表单，通过Modal的一个按钮如何控制，如何去校验多个表单。可以通过Ref实现此 *** 作

首先创建空的Ref数组

渲染界面，循环时每次创建一个Ref，和表单。并且这个表单用当前创建的Ref作为唯一标识。

2、表单子组件，将Form对象传递出去

3、create的时候，也就是点击Modald窗确定的时候，调用子组件的方法获取每个ref的Form对象，通过Promiseall方法判断是否都通过了校验

项目中使用了动态菜单，其中含有固定和非固定的菜单，但是我们的后端同事只在登陆时返回含有动态菜单 name 的数组。

阅读源码我们可以发现，在 layouts/BasicLayout 中可以看到 menuData 是从 menujs 中获取的

routes 就是运行生成的 umi/routerjs 的内容，将其输出我们可以直观的看见它的具体结构

在 routerconfigjs 中使用 dynamic 去标志该目录（路由）是动态的

大体思路就是对 routes 进行数据处理，将登录获取到的特定路由（这里用 name 属性标识）在 routes 中过滤出来

此时的 menuData 就是我们想要的实际菜单了

旧版本（2x）回到 layouts/BasicLayout 中，从props中取出 routerMap

权限组件 Authorized ，使用这个组件就能实现不跳转的 404、403页面了

但是3x的写法会导致出现404或者403时会全屏，所以如果是局部应用的话，可以将登录校验、404/403校验分离，将 Routes 分别挂在对应的路由层级上

项目开发种有这么一个需求，需要进行表格嵌套进行数据 *** 作，翻阅文档在antd上倒是有这样的例子，但是二级表格数据信息 *** 作都是一模一样的，文档也没有说明如何在 *** 作二级表格的时候如何获取到当前的一级表格行。

在 *** 作二级表格的时候，肯定是需要知道当前一级表格的行下标索引，不然根本不知道 *** 作的是那一行

经过一下午的折腾，总算是实现了，下面写了个简单的demo例子。不管业务怎么复杂，但核心点无非就是如何获取到当前的行下标，以及上一级的下标

例子：

复制上面的例子，跑一下就可以

以上就是关于Antd 表格合并与赋值渲染全部的内容，包括:Antd 表格合并与赋值渲染、antd中的表格可以监听更深层次的对象吗、React+Ts+Antd实现Modald框中控制多个Tab页的多个Form表单等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！