antd?vue中怎么在form表單的自定義組件里使用v-decorator

這篇文章主要介紹了antd vue中怎么在form表單的自定義組件里使用v-decorator的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇antd vue中怎么在form表單的自定義組件里使用v-decorator文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

antd vue中在form表單中的自定義組件使用v-decorator

問(wèn)題描述

項(xiàng)目需要，在表單中上傳圖片，所以要自己定以一個(gè)上傳圖片的組件，直接在form中使用，但是普通的自定義組件無(wú)法使用表單的v-decorator。

分析

轉(zhuǎn)自官方的一段話(huà)

this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"

經(jīng)過(guò) getFieldDecorator或v-decorator 包裝的控件，表單控件會(huì)自動(dòng)添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數(shù)據(jù)同步將被 Form 接管，這會(huì)導(dǎo)致以下結(jié)果：

• 你不再需要也不應(yīng)該用 onChange 來(lái)做同步，但還是可以繼續(xù)監(jiān)聽(tīng) onChange 等事件。

• 你不能用控件的 value defaultValue 等屬性來(lái)設(shè)置表單域的值，默認(rèn)值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。

• 你不應(yīng)該用 v-model，可以使用 this.form.setFieldsValue 來(lái)動(dòng)態(tài)改變表單值。

大概描述一下就是，一旦在form下使用了v-decorator之后，就不需要使用v-model，其實(shí)實(shí)現(xiàn)上也有所相同，在自定義組件中需要自己定以model的東西，詳細(xì)可以查閱官網(wǎng)。

簡(jiǎn)單說(shuō)明

通俗來(lái)說(shuō)，想使用v-decorator，就必須要有個(gè)value想子組件傳遞數(shù)據(jù)。

和一個(gè)change方法將子組件的數(shù)據(jù)變動(dòng)告訴父組件，下面看部分代碼

  model: {
    prop: 'value',
    event: 'change'
  },
  
  props: {
    value: {
      type: String
      // 這個(gè)參數(shù)是v-decorator給子組件傳值用的
      // 這里不要給默認(rèn)值， 在form下使用會(huì)爆警告 Warning: SquareUpload `default value` can not collect,  please use `option.initialValue` to set default value.
    }
  }
   watch: {
    // 監(jiān)聽(tīng)數(shù)據(jù)變化，及時(shí)提交給父組件
    fileList: {
      deep: true,
      immediate: true,
      handler: function (newV, oldV) {
      // 向父組件更新
        this.$emit('change', temp)
      }
    }
}

注意：value不要給默認(rèn)值，不然會(huì)爆警告default value can not collect, please use option.initialValue to set default value.

例子，封裝一個(gè)上傳圖片的組件，在form中使用

子組件

<template>
  <div class="clearfix">
    <a-upload
      :showRemoveIcon="false"
      :action="url"
      list-type="picture-card"
      :file-list="fileList"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < max && isShow">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          Upload
        </div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example"  :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
import config from '@/views/constant/constantConfig'
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
export default {
  name: 'SquareUpload',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String
      // 這個(gè)參數(shù)是v-decorator給子組件傳值用的
      // 這里不要給默認(rèn)值， 在form下使用會(huì)爆警告 Warning: SquareUpload `default value` can not collect,  please use `option.initialValue` to set default value.
    },
    // 上傳地址
    url: {
      type: String,
      default: config.uploadUrl
    },
    isShow: {
      type: Boolean,
      default: true
    },
    // 最多上傳數(shù)量
    max: {
      type: Number,
      default: 8
    }
  },
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: []
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    // 處理預(yù)覽
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange ({ file, fileList }) {
      this.fileList = fileList
    }
  },
  watch: {
    // 監(jiān)聽(tīng)數(shù)據(jù)變化，及時(shí)提交給父組件
    fileList: {
      deep: true,
      immediate: true,
      handler: function (newV, oldV) {
        if (this.fileList.length === 0) {
          return
        }
        this.fileList = newV
        const temp = this.fileList.filter(item => item.status !== 'uploading').map(item => (item.uid < 0 && item.name) || item.response.data.newFileName).join(',')
        // 向父組件更新
        this.$emit('change', temp)
      }
    },
    // 監(jiān)聽(tīng)父組件傳遞過(guò)來(lái)的圖片列表信息
    value: {
      deep: true,
      immediate: true,
      handler: function (newV) {
        // 數(shù)據(jù)為空的三種情況
        if (newV === null || newV === '' || newV === undefined) {
          this.fileList = []
          return
        }
        let count = -1
        let temp = []
        const tempList = []
        temp = newV.split(',')
        temp.forEach(item => {
          tempList.push({
            uid: count,
            name: item,
            status: 'done',
            url: config.baseImgUrl + item
          })
          count--
        })
        this.fileList = tempList
      }
    }
  }
}
</script>
<style>
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>

父組件使用

        <a-form-item
          label="上傳標(biāo)題圖片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <SquareUpload :isShow="!showable" v-decorator="['serveTitleImg', {rules: [{required: true, message: '請(qǐng)選擇圖片'}]}]"></SquareUpload>
        </a-form-item>

v-decorator antd vue的理解

v-decorator是ant Design的控件驗(yàn)證屬性

經(jīng)過(guò) getFieldDecorator 或 v-decroator 包裝的控件，表單控件會(huì)自動(dòng)添加 value onChange 或者 trigger ,數(shù)據(jù)同步由Form接管，這會(huì)導(dǎo)致以下結(jié)果

• 你不在需要也不應(yīng)該用 onChange 同步，但是可以繼續(xù)監(jiān)聽(tīng) onChange事件

• 你不能用控件的 value defaultValue等屬性來(lái)設(shè)置表單域的值，默認(rèn)值可以用 getFieldDecorator 或 v-decorator里的 initialValue

• 你不應(yīng)該用 v-model 可以使用 this.form.setFieldsValue 來(lái)動(dòng)態(tài)改變表單值

定義form：

<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
        <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="賬戶(hù): "
              v-decorator="[
                'username',
                {initialValue:'',rules: [{ required: true, message: '請(qǐng)輸入帳戶(hù)名或郵箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="prefix" type="user" : />
            </a-input>
          </a-form-item>
    </a-form>
 </div>
</template>
 
<script>
...
export default {
  ...
  data () {
    return {
      ...
      form: this.$form.createForm(this),
    }
  },
  created () {
    
  },
  ...
} 
</script>

v-decroator取值

this.form.vaidateFields((err, values) => {
    console.log(values) // {username: ''}
})

v-decroator賦值

this.form.setFieldsValue({
    username: '設(shè)置值'
})

清空表單數(shù)據(jù)

this.form.resetFields()

關(guān)于“antd vue中怎么在form表單的自定義組件里使用v-decorator”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“antd vue中怎么在form表單的自定義組件里使用v-decorator”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。