一“”设置单个单元格禁用或者可用:
getFieldDecorator 此方法的rule没有设置disabled的规则,所以对单个设置禁用似乎有点无能为力,他的具体的API: 具体 :https://blog.csdn.net/XUAN_1995/article/details/84582465
属性 说明 类型 默认值
getValueFromEvent 指定如何从事件中获取值,可以把 onChange 的参数(如 event)转化为控件的值 function(…args)
initialValue 子节点的初始值,类型、可选值均由子节点决定(注意:由于内部校验时使用 === 判断是否变化,建议使用变量缓存所需设置的值而非直接使用字面量))
normalize 转换默认的 value 给控件 function(value, prevValue, allValues): any
rules 校验规则,见下方表格 object[]
trigger 收集子节点的值的时机 string ‘onChange’
validateFirst 当某一规则校验不通过时,是否停止剩下的规则的校验 boolean
validateTrigger 校验子节点值的时机 string string[]
valuePropName 子节点的值的属性,如 Switch 的是 ‘checked’ string ‘value’
上文说的校验规则:
参数 说明 类型 默认值
enum 枚举类型 string -
len 字段长度 number -
max 最大长度 number -
message 校验文案 string ReactNode
min 最小长度 number -
pattern 正则表达式校验 RegExp -
required 是否必选 boolean false
transform 校验前转换字段值 function(value) => transformedValue:any -
type 内建校验类型,可选项 string ‘string’
validator 自定义校验(注意,callback 必须被调用) function(rule, value, callback) -
whitespace 必选时,空格是否会被视为错误 boolean false
自定义校验也没有找到合适的方法,只能找找偏方了(如果一行内,根据返回的数据值的有无来决定该单元格是否可编辑):
toggleEdit = () => {
//根据值判断该项是否可用,不可用则不处理点击事件,视为禁用
if ((this.props.record.isDisabled && this.props.dataIndex == 'income')) {
message.warning('此状态下该项不可修改')
this.setState({ editing: false });
} else {
const editing = !this.state.editing;
this.setState({ editing }, () => {
if (editing) {
this.input.focus();
this.input.select();
}
});
}
};
虽然代码丑了些,暂时先这么写着,如果有人有更好的方法,请一定要教教我~
toggleEdit = () => {
let dataIndex = this.props.dataIndex;
//借助了一个隐藏列,这个列用来存储当前行可以编辑的key或者是dataIndex, editArr,根据这个值是否包含当前点击的dataIndex来决定可否编辑
if ((dataIndex != 'income' && dataIndex != 'age' && dataIndex != 'sex')
|| (this.props.record.editArr && this.props.record.editArr.indexOf(dataIndex) >= -1)){
const editing = !this.state.editing;
this.setState({ editing }, () => {
if (editing) {
this.input.focus();
this.input.select();
}
});
}else{
message.warning('此项为固定值,不可更改,请知悉')
this.setState({ editing: false })
}
};
二:当获取值之后,select值刷新不到的问题
table的record的值是刷新了的,但是他的值一直不发生变化,后面才发现是defaultValue应该为value
columns: [
{
title: '类型',
dataIndex: 'type',
key: 'type',
align: "left",
width: 140,
render: (text, record, index) => {
if(record.istype){
let type = '';
if( record.type == '1')type = '1年级';
if( record.type == '2')type = '2年级';
if( record.type == '3')type = '3年级';
return (<Input value = {type} type='text' disabled={record.istype}/>)
}else
return (
<Form>
<Select placeholder="类型" value={record.tradeType} onChange={(e) => this.changeType(e, record)}>
<Option value="1">1年级</Option>
<Option value="2">2年级</Option>
<Option value="3">3年级</Option>
</Select>
</Form>
)
},
},
]