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">
        <FormItem
                v-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">
        <FormItem
                v-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
                v-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">
        <FormItem
                v-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
                v-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.index2
                this.formDynamic.items2.push({
                    value: '',
                    index: this.index2,
                    status: 1,
                    id: id
                });
            },
            handleRemove2 (index) {
                this.formDynamic.items2[index].status = 0;
            }
        }
    }
</script>

上面代码笔者实现了自定义 id 的添加，以字符串 items2_id_ 为前缀，加上数字组成 id，读者可根据自己的业务进行自定义命名前缀，道理是相同的

运行效果如下

 没有了警告

至此完