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();
}
},
},
],
3.xx Form.Item里面一个复杂的子组件
参考官网 https://3x.ant.design/components/form-cn/#components-form-demo-customized-form-controls