0
点赞
收藏
分享

微信扫一扫

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

幸福的无所谓 2022-01-20 阅读 69

v-decorator

<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>
data() {
    return {
        form: this.$form.createForm(this),
    }
}

form设置值

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

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

form获取值

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

pick方法 

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

相关推荐

0 条评论