Warning: You cannot set a form field before rendering a field associated wit
代码】Warning: You cannot set a form field before rendering a field associated wit。
·
1.调用setFieldsValue()方法,需要放在$nextTick()函数中执行,
2、给FORM赋值可以少传,但不可以多传
// 编辑
onEdit (val) {
this.form.resetFields()
this.visible = true
this.$nextTick(() => {
this.newUp = '编辑IPSEC'
this.isDisabled = true
const { agreement, encrypt, authentication, lifebytes, lifetime, name } = val
if (val) {
this.form.setFieldsValue({
username: name,
encrypt,
authentication,
lifebytes,
lifetime
})
this.agreementVal = agreement
}
}, 300)
},
<a-modal
:title="newUp"
:visible="visible"
:confirm-loading="confirmLoading"
@ok="onSave"
@cancel="handleCancel"
okText="确定"
cancelText="取消"
:maskClosable="false"
>
<a-form :form="form">
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="名称">
<a-input
:disabled="isDisabled"
v-decorator="['username', { rules: [{ required: true, message: '请输入名称' }] }]"
placeholder="请输入名称"
/>
</a-form-item>
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="封装协议"
>
<a-checkbox-group :options="options" v-model="agreementVal" @change="onChange($event,options)" />
</a-form-item>
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="加密算法">
<a-select
@change="handleChangePwd"
placeholder="请选择加密算法"
v-decorator="['encrypt', { rules: [{ required: true, message: '请选择加密算法' }] }]"
>
<a-select-option v-for="item in algorithm" :key="item.id" :value="item.name"> {{ item.name }} </a-select-option>
</a-select>
</a-form-item>
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="认证算法">
<a-select
@change="handleChangePwd1"
placeholder="请选择认证算法"
v-decorator="['authentication', { rules: [{ required: true, message: '请选择认证算法' }] }]"
>
<a-select-option v-for="item in authentication" :key="item.id" :value="item.name"> {{ item.name }} </a-select-option>
</a-select>
</a-form-item>
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="生命周期(m)">
<a-input-number
style="width:100%"
v-decorator="['lifetime',{rules: [{ required: true, message: '请输入周期1-60分钟' }, { validator: validateTime} ],validateTrigger: ['change', 'blur']}
]"
:min="1"
:max="60"
:step="1"
placeholder="请输入周期1-60分钟"
/>
</a-form-item>
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="流量(GB)">
<a-input-number
style="width:100%"
:min="1"
:max="4096"
:step="1"
v-decorator="['lifebytes',{rules: [{ required: true, message: '请输入流量,最大4096GB' }, { validator: validateFlow} ],validateTrigger: ['change', 'blur']}]"
placeholder="请输入流量,最大4096GB"
/>
</a-form-item>
</a-form>
</a-modal>
更多推荐
已为社区贡献5条内容
所有评论(0)