form 表单如何回现

 

在 Ant Design Of Vue (ant-design-vue) 中，回现不再是使用 v-model ，会提示你直接使用 v-decorator

 

        <a-upload

 

          v-decorator="[

 

            'logo',

 

            {rules: [{ required: true, message: '请上传店铺图片' }], validateTrigger: ['change','blur']}

 

          ]"

 

          name="logo"

 

          accept=".png,.jpg,.jpeg,.svg"

 

          method="post"

 

          list-type="picture-card"

 

          class="avatar-uploader"

 

          :show-upload-list="false"

 

          :action="$upload_url"

 

          :headers="headers"

 

          :data="requestData"

 

          @change="handleChange"

 

        >

 

          <img width="100" height="100" v-if="formData.imageUrl" :src="formData.imageUrl" alt="avatar" />

 

          <div v-else>

 

            <div class="ant-upload-text">

 

              上传

 

            </div>

 

          </div>

 

        </a-upload>

 

回显的话，直接使用 this.form.setFieldsValue

 

this.form.setFieldsValue({"username":['username_ddddd'],"nickname":['nickname_ddddd']}); //设置值   

 

this.form.setFieldsValue({"username": 'username_ddddd', "nickname": 'nickname_ddddd'}); //设置值

 

this.form.getFieldsValue();// 获取所有值

 

this.form.getFieldsValue(['username','nickname']); // 获取某一个值

 

this.form.resetFields();  // 重置表单值

 

this.form.validateFields((err,fieldsValue) => {  // 校验所有的值

 

  if (!err) {

 

    console.log(fieldsValue); //获取数据 {nickname: "实际值", username: "实际值"}

 

  }else {

 

    console.log(err);

 

  }

 

});

 

this.form.validateFields(['nickname'],(err,fieldsValue)=>{ // 校验某个值

 

  if (!err) {

 

    console.log(fieldsValue); //获取数据 {nickname: "实际值"}

 

  }else {

 

    console.log(err);

 

  }

 

});

 

这里需要注意的是，有时候会控制台发生一个警告，就是说，你在组件渲染的时候，给我这个表单设置值，关于You cannot set a form field before rendering a field associated with the value

 

    formData: {

 

      handler: function (val) {

 

        const { name, note } = val

 

        this.$nextTick(() => {

 

          if (this.type === 'edit') {

 

            this.form.setFieldsValue({

 

              name,

 

              note

 

            })

 

          }

 

        })

 

      },

 

      deep: true

 

    }

 

2. upload 组件在上传的时候，会产生 x-request-with 请求头发生跨域的问题，

 

需要给组件的 headers 设置 x-request-with 为 null

 

      headers: {

 

        'X-Requested-With': null

 

      },

 

3.