Ant DesignVue表单预设初值以及获取表单数据_ant design vue validatefields

一、方法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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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,
          })
        })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

接口返回的数据：

效果：

三、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',//页面跳转
          })
        })
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

修改备注以及内部标示

查看提交的数据

重新调用查询接口

修改成功。

表单预设初值以及获取表单数据的功能以及实现。希望对您有所帮助。