View UI，即原先的 iView，從 2019 年 10 月起正式更名為 View UI，并使用全新的 Logo

本文介紹 View UI （iview）動態表單的使用。在項目開發中，有些數據的數量是動態的，不確定的，可能是1條，也可能是多條。如人的證件，工作經歷，項目經驗等。在做這些數據的添加時就要使用動態表單

1、使用介紹

首先將 iview 官方的動態表單的代碼全部復制出來，粘貼到項目里，看一下運行效果

代碼如下

<template><Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px"><FormItemv-for="(item, index) in formDynamic.items"v-if="item.status":key="index":label="'Item ' + item.index":prop="'items.' + index + '.value'":rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"><Row><Col span="18"><Input type="text" v-model="item.value" placeholder="Enter something..."></Input></Col><Col span="4" offset="1"><Button @click="handleRemove(index)">Delete</Button></Col></Row></FormItem><FormItem><Row><Col span="12"><Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button></Col></Row></FormItem><FormItem><Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button><Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button></FormItem></Form> </template> <script>export default {data () {return {index: 1,formDynamic: {items: [{value: '',index: 1,status: 1}]}}},methods: {handleSubmit (name) {this.$refs[name].validate((valid) => {if (valid) {this.$Message.success('Success!');} else {this.$Message.error('Fail!');}})},handleReset (name) {this.$refs[name].resetFields();},handleAdd () {this.index++;this.formDynamic.items.push({value: '',index: this.index,status: 1});},handleRemove (index) {this.formDynamic.items[index].status = 0;}}} </script>

?代碼講解

這里核心的內容是vue data中定義的 formDynamic 這個對象，這個對象的 items 數組表示動態表單里的內容，如果items中有1個對象，則表示默認頁面上會有1個輸入框，示例代碼就是默認1個輸入框

items中的內容示例給了3個，value表示輸入框的值，讀者可根據自己的需求添加頁面元素，并在data中進行添加元素對應的值；index是每一項的序號，示例是從1開始，如果項目不需要可以去掉這個index；status 是顯示的控制，通過分析添加和刪除的代碼示例，可以知道status= 1是顯示，status=0是不顯示，示例給出的刪除只是刪除了頁面顯示，實際 items數組里的數據并沒有刪除，因此讀者在開發時要在刪除的方法?handleRemove 中，刪除對應在items數組中的值

2、擴展

在實際開發中，可能出現同一form表單中有多個動態表單的情況，這里需要注意一點，就是 vue 的 for 循環的 key 的問題

先看代碼

<template><Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px"><FormItemv-for="(item, index) in formDynamic.items"v-if="item.status":key="index":label="'Item ' + item.index":prop="'items.' + index + '.value'":rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"><Row><Col span="18"><Input type="text" v-model="item.value" placeholder="Enter something..."></Input></Col><Col span="4" offset="1"><Button @click="handleRemove(index)">Delete</Button></Col></Row></FormItem><FormItem><Row><Col span="12"><Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button></Col></Row></FormItem><FormItemv-for="(item, index) in formDynamic.items2"v-if="item.status":key="index":label="'Item ' + item.index":prop="'items2.' + index + '.value'":rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"><Row><Col span="18"><Input type="text" v-model="item.value" placeholder="Enter something..."></Input></Col><Col span="4" offset="1"><Button @click="handleRemove2(index)">Delete</Button></Col></Row></FormItem><FormItem><Row><Col span="12"><Button type="dashed" long @click="handleAdd2" icon="md-add">Add item</Button></Col></Row></FormItem><FormItem><Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button><Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button></FormItem></Form> </template> <script>export default {data () {return {index: 1,index2: 1,formDynamic: {items: [{value: '',index: 1,status: 1}],items2: [{value: '',index: 1,status: 1}]}}},methods: {handleSubmit (name) {this.$refs[name].validate((valid) => {if (valid) {this.$Message.success('Success!');} else {this.$Message.error('Fail!');}})},handleReset (name) {this.$refs[name].resetFields();},handleAdd () {this.index++;this.formDynamic.items.push({value: '',index: this.index,status: 1});},handleRemove (index) {this.formDynamic.items[index].status = 0;},handleAdd2 () {this.index2++;this.formDynamic.items2.push({value: '',index: this.index2,status: 1});},handleRemove2 (index) {this.formDynamic.items2[index].status = 0;}}} </script>

這里筆者添加了items2這個數組，并添加了它的添加和刪除的方法

運行效果如下

?這里在功能上沒有問題，但是打開瀏覽器的開發者工具就會看到有1個警告

為什么會產生這個警告呢？原因是這樣的，items 和 items2 在?v-for 進行遍歷時，都使用 index 作為 key，而 index 都是0，所有產生了這個警告

那么如何解決呢？其實很簡單，只要不使用相同的 key 就行了，這里可以自定義一個id，用id來作為 key，代碼實現如下

<template><Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px"><FormItemv-for="(item, index) in formDynamic.items"v-if="item.status":key="index":label="'Item ' + item.index":prop="'items.' + index + '.value'":rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"><Row><Col span="18"><Input type="text" v-model="item.value" placeholder="Enter something..."></Input></Col><Col span="4" offset="1"><Button @click="handleRemove(index)">Delete</Button></Col></Row></FormItem><FormItem><Row><Col span="12"><Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button></Col></Row></FormItem><FormItemv-for="(item, index) in formDynamic.items2"v-if="item.status":key="item.id":label="'Item ' + item.index":prop="'items2.' + index + '.value'":rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"><Row><Col span="18"><Input type="text" v-model="item.value" placeholder="Enter something..."></Input></Col><Col span="4" offset="1"><Button @click="handleRemove2(index)">Delete</Button></Col></Row></FormItem><FormItem><Row><Col span="12"><Button type="dashed" long @click="handleAdd2" icon="md-add">Add item</Button></Col></Row></FormItem><FormItem><Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button><Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button></FormItem></Form> </template> <script>export default {data () {return {index: 1,index2: 1,formDynamic: {items: [{value: '',index: 1,status: 1}],items2: [{value: '',index: 1,status: 1,id: 'items2_id_' + 1}]}}},methods: {handleSubmit (name) {this.$refs[name].validate((valid) => {if (valid) {this.$Message.success('Success!');console.log(JSON.stringify(this.formDynamic))} else {this.$Message.error('Fail!');}})},handleReset (name) {this.$refs[name].resetFields();},handleAdd () {this.index++;this.formDynamic.items.push({value: '',index: this.index,status: 1});},handleRemove (index) {this.formDynamic.items[index].status = 0;},handleAdd2 () {this.index2++;let id = 'items2_id_' + this.index2this.formDynamic.items2.push({value: '',index: this.index2,status: 1,id: id});},handleRemove2 (index) {this.formDynamic.items2[index].status = 0;}}} </script>

上面代碼筆者實現了自定義 id 的添加，以字符串?items2_id_ 為前綴，加上數字組成 id，讀者可根據自己的業務進行自定義命名前綴，道理是相同的

運行效果如下

?沒有了警告

至此完

總結

以上是生活随笔為你收集整理的View UI （iview）动态表单 使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。