ant design vue中點擊編輯,表單數據的綁定

在一般的表單中，都是使用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表單中綁定和提交數據