Vue版Ant Design给a-form表单-赋值及获取表单数据-案例

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue版Ant Design给a-form表单-赋值及获取表单数据-案例相关的知识,希望对你有一定的参考价值。

v-decorator

form表单内的文本输入框,使用了v-decorate进行数据绑定

说明:

v-decorate的用法,类似于v-model,但是v-decorator可以更方便的添加校验,必填项等;v-model可以更方便地获取值以及设置值,这个是二者在开发时最明显的区别

<a-form :form="form">
	<a-form-item label="名称:">
	  <a-input placeholder="请输入名称" v-decorator="['name',  rules: [ required: true, message: '请输入名称!' ] ]"></a-input>
	</a-form-item>
</a-form>

使用的template语法,form必须在data内定义

data() 
    return 
        form: this.$form.createForm(this),
    

form设置值

表单设置值前添加:this.form.resetFields();

设置值的方式是:this.form.setFieldsValue();

设置值

this.form.setFieldsValue(
    name: this.data.name,
    age: this.data.age
)

这种方法适合参数少的情况

需要先在data内定义  model:  对象,后面使用model设置,而且需要导入lodash的pick函数

this.form.resetFields();
this.model = Object.assign(, this.record);
this.$nextTick(() => 
  this.form.setFieldsValue(pick(this.model, 'nft_id', 'name', 'havenum', 'circulation'))
);

是将值统一放在 model这个对象内,然后将你需要设置进去的值,通过pick从this.model内选择得到,最后通过this.form.setFieldsValue(); 设置进去即可

form获取值

this.form.validateFields((err, values) => 
	if (!err) 
	  console.log('Received values of form: ', values);
	  // do something
	
)

pick方法 

form表单里如果有没有用到的变量,就会报警告,通过下面方法过滤掉没有用到的key value

let pick = function (obj, ...form) 
	let model = Object.assign(, obj)
	let newObj = 
	form.forEach((item) => 
	  newObj[item] = model[item]
	)
	return newObj

以上是关于Vue版Ant Design给a-form表单-赋值及获取表单数据-案例的主要内容,如果未能解决你的问题,请参考以下文章

ant-design 表单form label不换行

ant-design-vue 之form表单中label-col和wrapper-col使用

ant-design表单自定义验证

ant vue中表单中的校验

【Ant design vue】antd实现动态增减表单项,支持赋初始值

ant-design-vue——select下拉框tags清空已选数据