在一般的表单中,都是使用v-model来双向绑定数据,但是ant design vue中则会给予警告
1,获取数据:
getNews({ params: { Id: i //传进来的id等值,具体看后端要什么 } }).then(res => { console.log(res) if (res.code == 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 (res.code == 0) { this.$message.success(‘当前已经成功修改/修改‘) this.getNewslist() } }) }) }
以上就是from表单中绑定和提交数据
原文地址:https://www.cnblogs.com/bingchenzhilu/p/11951806.html
时间: 2024-10-08 01:48:37