antdesignvue中点击编辑,表单数据的绑定
在⼀般的表单中,都是使⽤v-model来双向绑定数据,但是ant design vue中则会给予警告
1,获取数据:
getNews({
antdesignvue 配置外部文件params: {
Id: i  //传进来的id等值,具体看后端要什么
}
}).then(res => {
console.log(res)
if (de == 0) {
this.form.setFieldsValue({
title: res.data.title,
introduce: res.data.introduce
})
}
})
2.布局
<a-form :form="form" @submit="handleOk" >
<a-form-item label="联系⼈电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
v-decorator="['linkphone', {rules: [{pattern:new RegExp(/^1[3|4|5|6|7|8|9]\d{9}$/,'g'),message: '请输⼊正确的⼿机号码'},{required: true, message: '请输⼊联系⼈电话'}]}]"              placeholder="请输⼊联系⼈电话"
/>
</a-form-item>
<a-form >
<-此处可以添加正则验证->
3.提交数据
handleOk(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
console.log(values)
editNews({
action: 'update',
title: values.title,
introduce: values.introduce
}).then(res => {
console.log(res)
if (de == 0) {
this.$message.success('当前已经成功修改/修改')
}
})
})
}
以上就是from表单中绑定和提交数据