一、a-form
组件使用
<a-form
:form="form"
layout="vertical"
:label-col="{span: 6}"
:wrapper-col="{span: 17,offset:1}"
></a-form>绑定数据
<a-form-item :label="$t('m.equipment') + 'ID'">
<!-- v-decorator="[
'deviceId',
{
rules: [{ required: false, message: $t('m.PleaseEnter') + $t('m.deviceId') }],
},
]"-->
<a-input
v-model="queryParam.deviceId"
:placeholder=" $t('m.PleaseEnter') + $t('m.deviceId')"
/>
</a-form-item>定义form
form: this.$form.createForm(this),提交数据，表单验证
this.form.validateFields((err, values) => {
if (!err) {
}
})打开表单时，内容重置 / 单个设置表单内容
this.form.resetFields()
this.form.setFieldsValue()
this.form.setFieldsValue({
name: this.data.name,
age: this.data.age
})
获取表单内容
this.form.getFieldsValue();
this.form.getFieldValue('name')打开表单后，将整条数据对应填写到表单
this.form.resetFields()
this.model = Object.assign({}, this.record)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, ',name', 'age'))
})有的时候可能会报错：
报错的话加一下this.$nextTick(()=>{})
二、a-form-model
组件使用
<a-form-model ref="ruleForm" :model="form" :rules="rules" :layout="form.layout">
<a-form-model-item :label="$t('m.electronicFence') + $t('m.name')" prop="name">
<a-input v-model="form.name" :placeholder="$t('m.electronicFence') + $t('m.name')" />
</a-form-model-item>
<a-form-model-item :label="$t('m.yaddress') + $t('m.search')" prop="address">
<input
style="height:15px"
v-model="form.address"
id="tipinput"
:placeholder="$t('m.electronicFence') + $t('m.yaddress')"
/>
</a-form-model-item>
<a-form-model-item>
<a-button @click="openPloy()" style="margin-bottom: 5px;margin-left:20px">编辑当前区域</a-button>
<a-button style="margin-left:20px" @click="delArea()">删除当前区域</a-button>
</a-form-model-item>
</a-form-model>data:
form: {
name: '',
address: undefined,
layout: 'inline'
},
rules: {
name: [{ required: true, message: `请输入电子围栏名称`, trigger: 'blur' }],
address: [{ required: true, message: `请选择地址`, trigger: 'blur' }]
},
labelCol: { span: 4 },
wrapperCol: { span: 14 },提交
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},重置
resetForm() {
this.$refs.ruleForm.resetFields();
},至于修改、获取form中绑定的值，直接this.form就好了
发表一下个人看法文章来源：https://www.toymoban.com/news/detail-605165.html
本人认为第二种方法比第一种简单的多，使用也很方便。文章来源地址https://www.toymoban.com/news/detail-605165.html
到了这里，关于ant a-form/a-form-model用法(组件使用、表单验证、数据收集、数据重置、数据提交)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
