shape_shi 2020-04-05 17:41 采纳率: 0%
浏览 1083
已结题

vue jsx antd form 表单控件显示隐藏造成数据丢失

我在vue里面用jsx的形式写antd的表单绑定,但是点击按钮显示或隐藏一个formitem后,造成下面的数据全部都没有,不知道怎么办,是我写的有问题么。。。请教~

<script>
export default {
    data () {
        return {
            isShow: false,
            form: this.$form.createForm(this)
        };
    },
    methods: {
        submit () {
            this.form.validateFieldsAndScroll((err, values) => {
                if (err) {
                    return;
                }
                console.log(values, 'formData');
            });
        },
        show () {
            this.isShow = !this.isShow;
        }
    },
    render () {
        let {getFieldDecorator} = this.form;

        return (
            <div>
                <hm-button onClick={this.show}>显示隐藏</hm-button>
                <a-form form={this.form}>
                    <a-form-item label='备注'>
                        {
                            getFieldDecorator('remark',
                                {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请填备注'
                                        }
                                    ]
                                })(<a-textarea placeholder='备注' {...{
                                props: {
                                    placeholder: '备注'
                                }
                            }}/>)
                        }
                    </a-form-item>
                    {
                        this.isShow &&
                            <a-form-item label='订单号'>
                                {
                                    getFieldDecorator('seq',
                                        {
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请填写订单号'
                                                }
                                            ]
                                        }
                                    )(<a-input {...{
                                        props: {
                                            placeholder: '订单号'
                                        }
                                    }}/>)
                                }
                            </a-form-item>
                    }
                    <a-form-item label='售后原因'>
                        {
                            getFieldDecorator('verify_return_reason',
                                {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请填写实际售后原因'
                                        }
                                    ]
                                })(<a-select {...{
                                props: {
                                    placeholder: '售后原因',
                                    options: [
                                        {
                                            label: '产品有问题',
                                            value: 1
                                        },
                                        {
                                            label: '物流有问题',
                                            value: 2
                                        }
                                    ]
                                }
                            }}/>)
                        }

                    </a-form-item>
                    <a-form-item label='德分'>
                        {
                            getFieldDecorator('paypoints_number',
                                {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请填写德分'
                                        }
                                    ]
                                })(<a-input {...{
                                props: {
                                    placeholder: '德分'
                                }
                            }}/>)
                        }
                    </a-form-item>
                    <a-form-item label='是否赔付'>
                        {
                            getFieldDecorator('is_compensate',
                                {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请填写是否赔付'
                                        }
                                    ]
                                })(<a-radio-group {...{
                                props: {
                                    placeholder: '是否赔付',
                                    options: [
                                        {
                                            label: '否',
                                            value: 0
                                        },
                                        {
                                            label: '是',
                                            value: 1
                                        }
                                    ]
                                }
                            }}/>)
                        }
                    </a-form-item>
                </a-form>
                <hm-button onClick={this.submit}>提交</hm-button>
            </div>
        );
    }
};
</script>

图片说明

图片说明

  • 写回答

2条回答

  • zqbnqsdsmd 2020-04-06 14:19
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿