antd vue表单用了v-decorator提交表单,怎么编辑的时候回填比表单
之前用element,现在用antd,官方好像更推荐用v-decorator去提交校验表单,请问,数据回填应该怎么去设置呢
<template>
<a-form :form="form" @submit="handleSubmit">
<a-form-item label="订单号" :label-col="formLayout.labelCol" :wrapper-col="formLayout.wrapperCol">
<a-input
v-decorator="[
'orderId',
{
rules: [
{
required: true,
message: '请输入单号!',
},
],
},
]"
placeholder="请输入订单号"
size="default"
/>
</a-form-item>
<a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
<a-button type="primary" html-type="submit"> 提交 </a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
data () {
return {
formLayout: {
labelCol: { span: 4 },
wrapperCol: { span: 8 }
},
buttonItemLayout: {
wrapperCol: { span: 14, offset: 4 }
},
ruleConfig: {
config: {
rules: [{ type: 'object', required: true, message: 'Please select time!' }]
},
rangeConfig: {
rules: [{ type: 'array', required: true, message: 'Please select time!' }]
}
}
}
},
beforeCreate () {
this.form = this.$form.createForm(this, { name: 'register' })
},
methods: {
// 提交
handleSubmit (e) {
e.preventDefault()
this.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values)
}
})
}
}
}
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
或者