antd Table，Form

3.x Table嵌套子表格错乱

原因

每一行需要唯一的rowKey

翻页的时候，传了排序参数

第一页正常请求；
翻页，却传了排序参数

原因

后端排序的话，字段sortOrder不需要：

模糊查询保留

如图，如果想控制模糊查询框中的内容，可以指定column对象的filteredValue属性

dataSource的地址不变，内部元素增减，table不会重新渲染

dataSource.push(value);
this.setState({dataSource})

组件重新渲染，但是table不会重新渲染
要这么写(修改dataSource的地址)：

dataSource.push(value);
this.setState({[...dataSource]})

Table的rowKey - 写成了函数形式，这个函数并不立即执行

需求：假如传了rowKeyFunc，使用函数形式。否则使用数据的id
一开始是这么写的：

rowKey={(r)=>rowKeyFunc?rowKeyFunc(r):'id'}

结果，每条数据的rowKey的值都是"id"。
这样写，会直接把整个函数传给table组件，而不是函数的运行结果（因为这个函数，这时候并不执行呀）。

应该这么写：

rowKey={rowKeyFunc?(r)=>rowKeyFunc(r):'id'}

在代码编译的时候，会执行该语句，所以会把三元运算符的结果传给table组件。

Form的校验-rule

getFieldDecorator的参数里面，可以定义校验规则rule。
如下：

rules: [{required: true,message: '值不能为空'},{validator: (rule, value, callback) => {if (!isInteger(value)) {callback('此值必须是大于 0 的整数');} else {callback();}},},]

rule是个数组，里面可以定义多个匹配规则r1, r2 …
校验：

假如匹配r1,仍然会继续向下进行匹配r2, r3…
假如匹配多个规则，每个规则里面的校验提示信息都会显示出来
Form 为验证提供了默认的错误提示信息
（但是，要翻墙，我打不开。不过像是required这种封装的是有默认提示信息的，所以不定义message也还是有提示信息）

就像上面的代码，假如输入框为空，提示信息为 ‘值不能为空此值必须是大于 0 的整数’
如果想要只提示一种，可以写到一个规则里面，如下：

rules: [{required: true,validator: (rule, value, callback) => {if(isEmpty(value)){callback(formatMessage({ id: 'validate.not-empty' }));}else if (!isInteger(value)) {callback('此值必须是大于 0 的整数');} else {callback();}},},],

antd Table，Form相关推荐

前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）
前端导出 excel 的需求很多,但市面上好用的库并不多,讲明白复杂使用场景的文章更少. 本文将以文字 + demo 源码的形式,力求讲清楚满足 99% 使用场景的终极 excel 导出方案. 如果项 ...
antd table 被内容撑开，设置columns宽度失效
问题描述:antd table被内容撑开,设置某列的width无效 1. table table-layout去控制 table {table-layout: fixed; } 2. 使用colum ...
antd table设置表格一个单元格的字体颜色_微软Office三件套，各有一个效率神器，全都知道的人不超过1%...
我们都知道,微软Office三件套是指Word.Excel和Powerpoint,虽然微软Office套件还有诸如Outlook.Onenote等软件,但平时用得最多的,还是这三件套. 三件套其实构成 ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...
antd table排序 vue_antd of Vue 之table组件踩坑记
需求:页面里有个table,点击编辑可以编辑该table,保存数据并展示到页面上来第一种方法就是把编辑态的table做成子组件(且叫editeTable),通过v-show判断是否进入编辑态来显示隐 ...
Antd Table 可编辑表格
antd Table 官方文档提及了可编辑单元格.可编辑行,这里解决可编辑表格主要思路是将 antd Table 可编辑行与 antd Form.List 相结合,将Table视为 Form. ...
antd table 时间搜索_antd table按表格里的日期去排序操作
表格内容根据票据日期升序(这里是已经排序后的效果) 上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeStr ...
React使用antd Table生成层级多选组件
一.需求用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
快速构建Table和Form页面
项目地址 https://github.com/iszsw/surface 基本功能 surface根据PHP代码配置创建Table.Form页面如果使用ThinkPHP的同学使用内置助手类,对tp ...