我在vue里面用jsx的形式写antd的表单绑定,但是点击按钮显示或隐藏一个formitem后,来回切换,造成下面的数据全部都没有,不知道怎么办,是我写的有问题么。。。请教~
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> ); } };
慕斯4360584
慕斯4360584
慕慕5436299
慕设计2395807
相关分类