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

Posted 2020-11-28 bingchenzhilu

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