快捷導(dǎo)航

Element實現(xiàn)動態(tài)增加多個輸入框并校驗

更新時間：2023年07月07日 16:30:33 作者：一碗情深

本文主要介紹了Element實現(xiàn)動態(tài)增加多個輸入框并校驗，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在做復(fù)雜的動態(tài)表單，實現(xiàn)業(yè)務(wù)動態(tài)變動，比如有一條需要動態(tài)添加的el-form-item中包含了多個輸入框，并實現(xiàn)表單驗證，但在element-ui組件庫中給出的表單校驗中沒有這樣的格式，想要實現(xiàn)這個功能就來跟我一起學(xué)習(xí)吧。

實現(xiàn)通過按鈕動態(tài)增加表單并驗證必填

先上實現(xiàn)效果圖：

實現(xiàn)代碼如下：

<el-form-item v-for="(item, index) in form.settings" :key="index" :label="'設(shè)置' + (index + 1)">
  <el-form-item label="名稱" :prop="'settings.'+index+'.name'" :rules="[{ required: true, message: '必填項', trigger: 'change' }]" label-width="50px">
    <el-input v-model.trim="item.name" style="width: 100px" />
  </el-form-item>
  <el-form-item label="值" :prop="'settings.'+index+'.val'" :rules="[{ required: true, message: '必填項', trigger: 'change' }]" label-width="50px">
    <el-input v-model.trim="item.val" style="width: 100px" />
  </el-form-item>
  <el-form-item label="key" :prop="'settings.'+index+'.key'" :rules="[{ required: true, message: '必填項', trigger: 'change' }]" label-width="50px">
    <el-input v-model.trim="item.key" style="width: 100px" />
  </el-form-item>
  <el-form-item>
    <el-button @click.prevent="removeSetting(item)">刪除</el-button>
  </el-form-item>
</el-form-item>
<el-form-item label=" ">
  <el-button icon="el-icon-circle-plus-outline" @click="addSetting()">新增設(shè)置</el-button>
</el-form-item>

實現(xiàn)思路

在 el-form-item 中嵌套 el-form-item ，只需要拼接一下prop就可以直接使用校驗：

:prop=“‘settings.’+index+‘.name’”

settings 是for循環(huán)取值的數(shù)組
name 是輸入框雙向綁定的值

:rules=“[{ required: true, message: ‘必填項’, trigger: ‘change’ }]”

校驗規(guī)則中需要校驗的數(shù)組

加入以下方法可動態(tài)增刪表單：

removeSetting(item) {
  var index = this.form.settings.indexOf(item)
  if (index !== -1) {
    this.form.settings.splice(index, 1)
  }
},
addSetting() {
  this.form.settings.push({
    'name': '',
    'key': '',
    'val': ''
  })
},

實現(xiàn)動態(tài)多個輸入框為行內(nèi)模式，其它為行外模式

效果如圖：

實現(xiàn)思路

在 el-form 定義 :inline="true" 實現(xiàn)行內(nèi)模式，以便于動態(tài)增加的多個輸入框在同一行顯示；再通過 Layout 布局 將其它比較小的單個輸入框控制在一個行內(nèi)，通過 row 和 col 組件，并通過 col 組件的 span 屬性我們就可以自由地組合布局。

實現(xiàn)代碼如下：

<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="120px">
  <el-row>
    <el-col :span="24">
      <el-form-item label="test1" prop="teest1">
        <el-input v-model.trim="form.test1" style="width: 220px" />
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item label="test2" prop="test2">
        <el-input v-model.trim="form.test2" style="width: 220px" />
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item label="test3" prop="test3">
        <el-input v-model.trim="form.test3" style="width: 220px" />
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item v-for="(item, index) in form.settings" :key="index" :label="'設(shè)置' + (index + 1)">
        <el-form-item label="名稱" :prop="'settings.'+index+'.name'" :rules="[{ required: true, message: '必填項', trigger: 'change' }]" label-width="50px">
          <el-input v-model.trim="item.name" style="width: 100px" />
        </el-form-item>
        <el-form-item label="值" :prop="'settings.'+index+'.val'" :rules="[{ required: true, message: '必填項', trigger: 'change' }]" label-width="50px">
          <el-input v-model.trim="item.val" style="width: 100px" />
        </el-form-item>
        <el-form-item label="key" :prop="'settings.'+index+'.key'" :rules="[{ required: true, message: '必填項', trigger: 'change' }]" label-width="50px">
          <el-input v-model.trim="item.key" style="width: 100px" />
        </el-form-item>
        <el-form-item>
          <el-button @click.prevent="removeSetting(item)">刪除</el-button>
        </el-form-item>
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item label=" ">
        <el-button icon="el-icon-circle-plus-outline" @click="addSetting()">新增設(shè)置</el-button>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

到此這篇關(guān)于Element實現(xiàn)動態(tài)增加多個輸入框并校驗的文章就介紹到這了,更多相關(guān)Element動態(tài)增加輸入框并校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: