Ant DesignVue表单预设初值以及获取表单数据
一、方法setFieldsValue与validateFields
Ant DesignVue官网,查看form的API,方法setFieldsValue 用给来设置输入控件的值。方法validateFields来获取一组输入域的值与校验全部组件。
二、setFieldsValue方法使用
1.form表单
<template>
<a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
<a-row :gutter="24" type="flex" justify="center">
<a-col :span="10" :style="{ textAlign: 'center' }">
<a-form-item label="备注" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
<a-input
v-decorator="[
'beiZhu', // 给表单赋值或提取表单时,input对应的key
{rules: [{ required: false, message: '不能为空' }]} //校验规则
]" //
/>
</a-form-item>
</a-col>
<a-col :span="10" :style="{ textAlign: 'center' }">
<a-form-item label="内部标示" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
<a-input
v-decorator="[
'neiBuBiaoShi',
{rules: [{ required: false, message: '不能为空' }]}
]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24" :style="{ textAlign: 'center' }">
<a-button type="primary" html-type="submit">提交</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">取消</a-button>
</a-col>
</a-row>
</a-form>
</template>
2.页面进入时预设初值
mounted: function () {
let id = this.$route.query.id //路由信息中传的id
this.$ajax({
method: 'post',
url: this.IpConfig + '/xing/jtTieLuCheZhanZhuangZaiNengLi/selectOne',//查询接口地址
params: {
id: id,
},
}).then((res) => {
console.log(res)
let data= res.data//接口返回的数据
this.form.setFieldsValue({
beiZhu:data.beiZhu, //将data.beiZhu赋值给form下的beiZhu
neiBuBiaoShi:data.neiBuBiaoShi,
})
})
},
接口返回的数据:
效果:
三、validateFields方法使用
3.获取form表单中的数据提交数据
//提交表单
handleSearch(e) {
e.preventDefault()//规定阻止e事件的默认动作。
this.form.validateFields((error, values) => {//获取form表单中的数据
if (!error) {//当没有错误时调用提交方法
console.log('values',values);
this.engineeringUpd(values)
}
})
},
//提交方法
engineeringUpd: function (values) {
let params = {
beiZhu.beiZhu,
neiBuBiaoShi.neiBuBiaoShi,
}
this.$ajax({
method: 'POST',
url: this.IpConfig + '/xing/jtTieLuCheZhanZhuangZaiNengLi/addData',//提交接口地址
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
params: params,//提交参数
}).then(function (response) {
that.$message.success('添加成功!')
that.$router.push({
name: 'gongLuSuiDao',//页面跳转
})
})
},
修改备注以及内部标示
查看提交的数据
重新调用查询接口
修改成功。
表单预设初值以及获取表单数据的功能以及实现。希望对您有所帮助。