欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3.0中使用element UI表單遍歷校驗問題解決

 更新時間:2022年04月01日 09:04:01   作者:saligia28  
本文主要介紹了vue3.0中使用element UI表單遍歷校驗問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題

在使用vue3.0寫項目的時候遇到一個需要遍歷的表單,可以增加刪除表單對象

不考慮校驗問題的話,就是簡單的數(shù)組包form對象。涉及校驗的時候,按照以往的寫法就是綁定ref值,然后調(diào)用組件的validate方法【form表單中配置rule規(guī)則】。

解決方法就是將數(shù)組內(nèi)嵌在一個對象中,對象的結(jié)構(gòu)跟我們定義的form對象結(jié)構(gòu)一致

//我們需要遍歷的form對象數(shù)組
const arr = [
    {
        name:'',
        sex:'',
        age:'',
    },{
        name:'',
        sex:'',
        age:'',
    }
]
//處理后的對象
const afterForm = {
    name:'',
    sex:'',
    age:'',
    child:arr,//這里的arr就是我們需要遍歷的數(shù)組【這個key值可以隨便取,不一定非得是‘child',盡量不要出現(xiàn)歧義就好】
}

然后就是html中的dom結(jié)構(gòu)寫法

<el-dialog v-model="addPageVisible" width="1000px" title="新增頁面參數(shù)配置" @closed="closeDialog">
      <el-form :model="form" label-width="120px" :inline="true" ref="ruleFormRef" :rules="rules">
        <el-card v-for="(item, index) in form.child" :key="index" shadow="hover" class="mb20">
          <el-form-item label="頁面名稱:" :prop="`child[${index}].pageName`" :rules="rules.pageName">
            <el-input v-model.trim="item.pageName" class="length-limit"></el-input>
          </el-form-item>
          <el-form-item label="頁面路由:" :prop="`child[${index}].routerName`" :rules="rules.routerName">
            <el-input v-model.trim="item.routerName" class="length-limit"></el-input>
          </el-form-item>
          <el-form-item label="頁面類型:" :prop="`child[${index}].businessType`" :rules="rules.businessType">
            <el-select v-model.trim="item.businessType" class="length-limit">
              <el-option
                v-for="item in bussinessOptions"
                :value="item.value"
                :label="item.label"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="pageManage__dialog-foot">
            <el-button type="primary" round @click="addNewForm" v-if="index === allForm.length - 1"
              >新增配置表單</el-button
            >
            <el-button round :disabled="allForm.length === 1 && index === 0" @click="deleteForm(index)"
              >刪除表單</el-button
            >
          </div>
        </el-card>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button round @click="addPageVisible = false">取 消</el-button>
          <el-button round type="primary" @click="submitNewPage">提交</el-button>
        </span>
      </template>
    </el-dialog>
//這是我實際項目的頁面,所以定義的參數(shù)名可能不太一樣

寫法上跟一般的form表達(dá)差不多,只是我們el-form綁定的model值應(yīng)該是我們處理過的對象,主要有兩個地方需要注意

el-form-item上面綁定的prop值應(yīng)該寫成 :prop="child[${index}].pageName",rules也要綁定到對應(yīng)的值。

const rules = reactive({
      pageName: [{ required: true, message: '請輸入頁面名稱', trigger: 'blur' }],
      routerName: [{ required: true, message: '請輸入路由名稱', trigger: 'blur' }],
      businessType: [{ required: true, message: '請選擇頁面類型', trigger: 'change' }],
    })

考慮到我們需要用的數(shù)組會有數(shù)量變化,可以直接用computed計算屬性去得到處理后的數(shù)組

const form = computed(() => {
      return { pageName: 'string', routerName: 'string', businessType: 'string', child: allForm.value }
    })

然后就能成功了??!

總結(jié)

我自己的理解,就是將我們需要校驗的值在一個偽造的form對象中處理,然后內(nèi)層遍歷的的真實form對象可以用指定值的方式去綁定校驗規(guī)則。

到此這篇關(guān)于vue3.0中使用element UI表單遍歷校驗問題解決的文章就介紹到這了,更多相關(guān)element表單遍歷校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue $set 給數(shù)據(jù)賦值的實例

    vue $set 給數(shù)據(jù)賦值的實例

    今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue中mixins混入的介紹和使用詳解

    Vue中mixins混入的介紹和使用詳解

    mixins(混入)是一種分發(fā)?Vue?組件中可復(fù)用功能的非常靈活的方式,這篇文章主要為大家介紹了mixins混入的介紹和使用,需要的可以參考下
    2023-08-08
  • vue導(dǎo)入excel文件,vue導(dǎo)入多個sheets的方式

    vue導(dǎo)入excel文件,vue導(dǎo)入多個sheets的方式

    這篇文章主要介紹了vue導(dǎo)入excel文件,vue導(dǎo)入多個sheets的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 詳解Vue中如何進(jìn)行分布式日志管理與日志分析

    詳解Vue中如何進(jìn)行分布式日志管理與日志分析

    在現(xiàn)代應(yīng)用程序中,日志是一項重要的功能,用于幫助開發(fā)人員和運維人員了解應(yīng)用程序的行為并進(jìn)行故障排除,本文將介紹如何在Vue應(yīng)用程序中實現(xiàn)分布式日志管理和日志分析功能,感興趣的可以了解一下
    2023-06-06
  • vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程

    vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程

    這篇文章主要介紹了vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03
  • vue2組件進(jìn)階與插槽詳解(推薦!)

    vue2組件進(jìn)階與插槽詳解(推薦!)

    插槽(slot)作用是讓父組件可以往子組件指定位置插入?html?結(jié)構(gòu),也是組件的一種通信方式,下面這篇文章主要給大家介紹了關(guān)于vue2組件進(jìn)階與插槽的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • Vue仿百度搜索功能

    Vue仿百度搜索功能

    這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • vue使用echarts實現(xiàn)水平柱形圖實例

    vue使用echarts實現(xiàn)水平柱形圖實例

    這篇文章主要介紹了vue使用echarts實現(xiàn)水平柱形圖實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue infinite update loop的問題解決

    Vue infinite update loop的問題解決

    這篇文章主要介紹了Vue "...infinite update loop..."的問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • Vue實現(xiàn)進(jìn)度條變化效果

    Vue實現(xiàn)進(jìn)度條變化效果

    這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)進(jìn)度條變化效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09

最新評論