Vue版Ant Design给a-form表单-赋值及获取表单数据-案例
v-decoratorform表单内的文本输入框,使用了v-decorate进行数据绑定说明:v-decorate的用法,类似于v-model,但是v-decorator可以更方便的添加校验,必填项等;v-model可以更方便地获取值以及设置值,这个是二者在开发时最明显的区别<a-form :form="form"><a-form-item label="名称:"><
·
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
}
更多推荐
已为社区贡献22条内容
所有评论(0)