antd?vue中,如何在form表單中的自定義組件使用v-decorator
更新時(shí)間：2023年04月21日 10:43:23 作者：散裝java
antd?vue中,在form表單中的自定義組件使用v-decorator問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
antd vue中在form表單中的自定義組件使用v-decorator
問題描述
項(xiàng)目需要，在表單中上傳圖片，所以要自己定以一個(gè)上傳圖片的組件，直接在form中使用，但是普通的自定義組件無法使用表單的v-decorator。
分析
轉(zhuǎn)自官方的一段話
this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"
經(jīng)過 getFieldDecorator或v-decorator 包裝的控件，表單控件會(huì)自動(dòng)添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數(shù)據(jù)同步將被 Form 接管，這會(huì)導(dǎo)致以下結(jié)果：
- 你不再需要也不應(yīng)該用 onChange 來做同步，但還是可以繼續(xù)監(jiān)聽 onChange 等事件。
- 你不能用控件的 value defaultValue 等屬性來設(shè)置表單域的值，默認(rèn)值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
- 你不應(yīng)該用 v-model，可以使用 this.form.setFieldsValue 來動(dòng)態(tài)改變表單值。
大概描述一下就是，一旦在form下使用了v-decorator之后，就不需要使用v-model，其實(shí)實(shí)現(xiàn)上也有所相同，在自定義組件中需要自己定以model的東西，詳細(xì)可以查閱官網(wǎng)。
簡(jiǎn)單說明
通俗來說，想使用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)聽數(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" style="width: 100%" :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)聽數(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)聽父組件傳遞過來的圖片列表信息
? ? 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)過 getFieldDecorator 或 v-decroator 包裝的控件，表單控件會(huì)自動(dòng)添加 value onChange 或者 trigger ,數(shù)據(jù)同步由Form接管，這會(huì)導(dǎo)致以下結(jié)果
- 你不在需要也不應(yīng)該用 onChange 同步，但是可以繼續(xù)監(jiān)聽 onChange事件
- 你不能用控件的 value defaultValue等屬性來設(shè)置表單域的值，默認(rèn)值可以用 getFieldDecorator 或 v-decorator里的 initialValue
- 你不應(yīng)該用 v-model 可以使用 this.form.setFieldsValue 來動(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="賬戶: "
? ? ? ? ? ? ? v-decorator="[
? ? ? ? ? ? ? ? 'username',
? ? ? ? ? ? ? ? {initialValue:'',rules: [{ required: true, message: '請(qǐng)輸入帳戶名或郵箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
? ? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
? ? ? ? ? ? </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()
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
什么是vue.js事件處理器？這篇文章主要介紹了vue.js事件處理器的相關(guān)資料2017-03-03
這篇文章主要介紹了淺談vue中.vue文件解析流程,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Vue消息提示this.$message方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-09-09
這篇文章主要介紹了vue-cli項(xiàng)目中使用Mockjs詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue2.x background:url()的踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決Vue項(xiàng)目中Emitted value instead of an
這篇文章主要介紹了解決Vue項(xiàng)目中Emitted value instead of an instance of Error問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
一文學(xué)會(huì)什么是vue.nextTick()
這篇文章主要介紹了一文學(xué)會(huì)什么是vue.nextTick()，下面文章圍繞主題的相關(guān)資料展開詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
基于Vue+ECharts實(shí)現(xiàn)地圖展示與交互
這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實(shí)現(xiàn)一個(gè)互動(dòng)式的地圖展示組件,其中支持返回上一層地圖、點(diǎn)擊查看不同城市的詳細(xì)信息,以及根據(jù)數(shù)據(jù)動(dòng)態(tài)展示不同的統(tǒng)計(jì)信息,感興趣的小伙伴跟著小編一起來看看吧2025-02-02