码迷,mamicode.com
首页 > 其他好文 > 详细

ant design vue中点击编辑,表单数据的绑定

时间:2019-11-28 18:56:42      阅读:1370      评论:0      收藏:0      [点我收藏+]

标签:message   ram   list   style   reg   decorator   class   require   span   

在一般的表单中,都是使用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表单中绑定和提交数据

 

 

ant design vue中点击编辑,表单数据的绑定

标签:message   ram   list   style   reg   decorator   class   require   span   

原文地址:https://www.cnblogs.com/bingchenzhilu/p/11951806.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!