ant design table 可编辑值,当获取值之后,select值刷新不到的问题,以及设置单个单元格禁用或者可用

一“”设置单个单元格禁用或者可用:
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>
                        )
                    },
                },
          ]

你可能感兴趣的:(前端学习,js)