應用十二 Vue之動態表單的實現及校驗

該篇仍然使用vue + typescript的語法，以近期專案中的例項來做分享~

動態表單實現

首先給出頁面展示效果：

該頁面分為上下兩部分，上面是靜態表單部分，下面是動態的實現。簡單來說就是每點選一次批量新增按鈕就會新增一行裝置資訊表單，點選後面的移除就會刪掉當前表單行。

靜態表單就不多說了，動態表單的具體實現邏輯是：

1、將每一行的表單作為乙個單獨的元件進行封裝。

2、使用乙個陣列來儲存多個表單（也就是上一步封裝的元件）並迴圈展示。

**實現如下：

其中device-info就是封裝好的元件，元件的完整實現如下：

">

@keyup.native="deviceinfo.devicecode=deviceinfo.devicecode.replace(/[^\w\.\/]/ig,'').touppercase()">
">
for="item in device_brand" :key="item.modelcode" :label="item.modelname" :value="item.modelcode">
">
for="item in device_model" :key="item.modelcode" :label="item.modelname" :value="item.modelcode">
if="list.length > 1">
移除

動態表單的批量新增和移除功能的實現如下：

動態表單校驗

同樣先給出頁面表單校驗的展示效果：

雖然整個頁面分為上下靜態表單和動態表單兩部分，但用的是乙個按鈕一次提交的，為了實現統一校驗，所以整個頁面最好使用乙個el-form標籤包裹起來，靜態表單的校驗請參考《應用二：vue之elementui form表單校驗》

，而動態表單的校驗有兩個地方需要注意，乙個是el-form-item標籤上prop屬性的寫法，另乙個就是校驗規則的寫法（只能寫在標籤上），具體寫法如下：

prop的屬性值中，list是form物件中儲存元件的陣列，index是當前元件在陣列中的索引，devicecode就是當前表單繫結的字段，可以參考前面元件的完整實現**。

下面給出整個頁面的完整**：

新增寄件資訊

新增裝置資訊
批量新增
for="(item, $index) in form.list" :key="$index">
if="$index!=form.list.length-1">
維修上報提交

vue 實現動態表單動態渲染元件的方式（一）

vue 實現動態表單 動態渲染元件的方式 一 實現demo 主元件 父元件 此處用了自定義元件的v model來收集子元件的資料 父元件 model formdata v for item,index in formitemlist key index label item.label is ite...

vue中表單的動態繫結

有乙個表單 el form model configform el form 如果configform初始化為 此物件是動態變化的，如果後面賦值時，這樣 this.configform key1 this.configform key2 this.configform key3 vue是檢測不到其變...

Vue和餓了麼UI 實現動態表單效果

對於動態增減表單項，element ui 官方文件表單那一節已經介紹得很清楚了，我之前沒有看見，繞了很多彎路，這裡針對點選按鈕增刪一排輸入框的問題做乙個總結。效果圖如下 存在一排必填的姓名與手機號，點選增加後會新增一行，點選每行後面的刪除圖示則會刪除該行 必填項很簡單，就是普通表單 增加 expor...