快捷導(dǎo)航

vue3 element的Form表單用法實(shí)例

更新時(shí)間：2022年10月15日 10:22:21 作者：前端冒菜師

這篇文章主要為大家介紹了vue3中element的Form表單用法實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

最近在做一系列后臺(tái)管理系統(tǒng)，其中用的最多的就是表單和表格了。這里講一下我最近對(duì)表單封裝的思考。以下是我的設(shè)計(jì)思路以及具體實(shí)現(xiàn)，我使用的是vue3+element-plus，因此這個(gè)組件也是以這兩個(gè)庫(kù)為基礎(chǔ)。

已上傳npm www.npmjs.com/package/@we…

設(shè)計(jì)目標(biāo)

配置化

我們希望把表格的內(nèi)容，驗(yàn)證規(guī)則,甚至于表單的樣式，格式都能更規(guī)則化，配置化，這樣后續(xù)我們可以通過構(gòu)造json去實(shí)現(xiàn)一個(gè)表單，甚至可用實(shí)現(xiàn)拖拽式的構(gòu)造表單。

參數(shù)簡(jiǎn)單

盡量減少json的層級(jí)，減少json的參數(shù)，字段更加語(yǔ)義化。

自由度

json其實(shí)是一套自由度的很少的規(guī)則，但是vue則我們提供更多的自由度，比如h函數(shù)，比如動(dòng)態(tài)組件，利用這些方法我們可以實(shí)現(xiàn)更高的自由度。

實(shí)現(xiàn)過程

表單項(xiàng)的格式設(shè)計(jì)

首先第一步，我們先設(shè)計(jì)一個(gè)基礎(chǔ)的格式,在這個(gè)JSON里，字段名都是很簡(jiǎn)單的英文單詞，我專門把驗(yàn)證的規(guī)則rule放到每個(gè)子項(xiàng)里來，這也比較符合直觀。

 const oneItem = {
          key: 'title',
          title: '小說名',
          component: 'el-input',
          props: { placeholder: '請(qǐng)輸入姓名' },
          rule: [{ required: true, trigger: 'blur', message: '必填項(xiàng)' }],
}

在這個(gè)格式里面，比較重要的主要是2個(gè)，key，component。key其實(shí)就是你表單里數(shù)據(jù)的字段名，而component則是你指定的編輯組件，在這里我們可以直接使用字符串，但其實(shí)這里可以通過vue的動(dòng)態(tài)組件實(shí)現(xiàn)更靈活的應(yīng)用，比如我們換一個(gè)組件庫(kù)的input組件

import { Input } from '@varlet/ui' 
import '@varlet/ui/es/input/style/index.js'
const oneItem = {  component:  Input }

這時(shí)候，我們就需要?jiǎng)討B(tài)組件去渲染它，因此我們可以這樣寫去渲染，當(dāng)component是一個(gè)字符串，比如el-input的時(shí)候，我們渲染element的input組件，至于v-model這些我就省略了

<el-form-item v-for="item in items" :key="item.key">
  <el-input v-if="item.component === 'el-input'" />
  <component v-else :is="item.component" />
</el-form-item>

v-bind的妙用

每個(gè)組件庫(kù)的組件參數(shù)都不一樣，而且有些屬性我們可能并不使用，比如el-input有這個(gè)屬性prefix-icon，是一個(gè)前綴圖標(biāo),別的組件庫(kù)不一定有啊，那到我們需要把所有組件庫(kù)的所有屬性都寫在json？我在之前的json中設(shè)計(jì)了以個(gè)props字段，這里面就是存放的是組件庫(kù)的屬性，或者是我們需要給組件傳的值. 這時(shí)候，vue給我們提供了一個(gè)很方便的功能，直接使用v-bind傳入一個(gè)對(duì)象，他就自動(dòng)會(huì)幫我們把屬性綁定。比如這樣寫

const props = {a:1,b:2}
 <el-input v-if="item.component === 'el-input'" v-bind="props" />

vue就會(huì)自動(dòng)處理為下面這種, 這就是v-bind的妙用。當(dāng)然運(yùn)用renderFunction也可以實(shí)現(xiàn)這個(gè)效果，諸君可以自己嘗試一下

 <el-input v-if="item.component === 'el-input'" v-bind:a="props.a" v-bind:a="props.b"/>

computed的妙用：實(shí)現(xiàn)v-model

下面我們來看一下數(shù)據(jù)的問題，vue中提供了方便v-model，方便我們修改的值能實(shí)時(shí)響應(yīng),并且我們可以自己實(shí)現(xiàn)一自定義v-model。它的基本原理是這樣，我們先父?jìng)髯?，然后子再通過事件告訴父組件修改這個(gè)值。大概實(shí)現(xiàn)就是這樣

<script>
    <button>+1</button>
</script>
export default{
    props:[
    'modelValue', //v-model
    'a' //v-model:a
    ],
    emits:['update:modelValue','update:a'],
    methods:{
        add(){
            this.$emit('update:modelValue',this.modelValue++)
            this.$emit('update:a',this.a++)
        }
    }
}

但是這個(gè)代碼里有一個(gè)問題，在vue中我們其實(shí)是無法修改props的，也就是說this.modelValue++會(huì)報(bào)錯(cuò)，那么如何解決這個(gè)問題呢，答案就是computed,computed其實(shí)也可以修改的，我們可以指定它的set方法,這樣就躲避了修改props的問題，從而實(shí)現(xiàn)了v-model

{
    computed:{
        num:{
            get(){
                return this.modelValue
            },
            set(val){
                 this.$emit('update:modelValue',val)
            }
        }
    }
}

useAttrs的妙用

在我的組件中有這樣一個(gè)功能，上傳。這就涉及到了回調(diào)函數(shù)的問題，也就是說我上傳完，甚至包括方法的名字，這樣才更靈活，比如我們?cè)趈son中新增一個(gè)字段，

{
 uploader: {
     emits: 'handleUploadCover',
 }
}

然后我在渲染的時(shí)候會(huì)給它綁上這個(gè)事件,那么我們?nèi)绾潍@取到這個(gè)事件的函數(shù)，并調(diào)用呢？

<zForm @handleUploadCover="xxx" />

在vue3中，我使用了useAttrs,需要注意的是vue3這里似乎與vue2有些不同。vue3中，attrs獲取到的是沒有注冊(cè)的值，比如你如果在emits里聲明了，在這里就取不到了，不過這也正合我意，我們可以隨意指定事件名。

const attrs = useAttrs()
/*
  返回值
 {
     onHandleUploadCover:function(){xxx}
 }
*/

可以看到這里能獲取事件，只是名字略有不同，這里大家處理一下就行了

表單驗(yàn)證

表單里最重要的就是驗(yàn)證.首先在我之前的設(shè)計(jì)中，表單驗(yàn)證的規(guī)則是分布在每一個(gè)子項(xiàng)中，因此我們需要整合一下，這一塊我就不贅述了，也很簡(jiǎn)單。

驗(yàn)證方法我是直接使用的el-form的驗(yàn)證,只是封裝了一下罷了。需要注意的是，如果你用的是script setup，需要使用defineExpose導(dǎo)出這個(gè)方法

const validate = ()=> new Promise((resolve) => {
        this.$refs.form.validate((isValid) => resolve(isValid));
      })
 defineExpose({
     validate
 })

上傳文件

上傳文件這里我其實(shí)截取了一下element的上傳，只使用了它選擇的文件的功能，這塊其實(shí)可以自己實(shí)現(xiàn)的。因?yàn)槲疑蟼髦虚g還要加很多參數(shù)，還有驗(yàn)證，因此我使用了before-upload方法，并主動(dòng)reject.

 <el-upload
        v-if="item.uploader"
        style="margin-top: 10px"
        :before-upload="(file) => beforeUpload(file, item)"
        :show-file-list="false"
        v-bind="item.uploader.props"
      >
        <el-button type="primary">點(diǎn)擊上傳</el-button>
 </el-upload>
 const beforeUpload = (rawFile, { key, uploader }) => {
     /*執(zhí)行邏輯，其實(shí)就是調(diào)起uploader.emits里的方法*/
     return Promise.reject()
 }

代碼總結(jié)

我把demo放到了這里，后續(xù)有時(shí)間我整理一下發(fā)個(gè)npm包。 stackblitz.com/edit/vue-m8…

這次封裝這個(gè)組件，我學(xué)到了很多東西，一些比較細(xì)微的vue3知識(shí)點(diǎn)，比如v-bind。但我也知道這也封裝也有一些問題或者叫爭(zhēng)論。

到底應(yīng)不應(yīng)該使用json

之前看過一篇封裝el-table的文章，里面就反對(duì)使用json，原因無非2點(diǎn)：json結(jié)構(gòu)過于龐大，json結(jié)構(gòu)不利于接手代碼的人使用。

先說第二點(diǎn)，我覺得通過一個(gè)好的結(jié)構(gòu)定義是可以緩解這個(gè)問題的,但是難道你函數(shù)式封裝就沒有學(xué)習(xí)成本了？我覺得json封裝其實(shí)每次就是復(fù)制黏貼，反而學(xué)習(xí)成本更低，但是開發(fā)成本會(huì)更高，你需要處理各種錯(cuò)誤的值，錯(cuò)誤的結(jié)構(gòu)，因此結(jié)構(gòu)越簡(jiǎn)單越好，甚至可以拍平。
json并不龐大，龐大的是我們的表單，如果你表單里幾百個(gè)條目，你怎么樣寫都只會(huì)龐大，因此還是建議分割表單，及時(shí)上報(bào)。

需不需要v-model

在我這次封裝中，我把數(shù)據(jù)通過v-model實(shí)時(shí)返回了，但是當(dāng)我寫到結(jié)尾的時(shí)候，我覺得表單的數(shù)據(jù)并不需要實(shí)時(shí)，因?yàn)槲覀冃枰牟皇菍?shí)時(shí)的數(shù)據(jù)，而是驗(yàn)證后的正確數(shù)據(jù)。因此我覺得我們可以暴露出一個(gè)getData方法，返回驗(yàn)證正確的數(shù)據(jù)。