View UI （iview）动态表单使用教程

旧城等待， 2022-09-14 08:42 224阅读 0赞

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

本文介绍 View UI （iview）动态表单的使用。在项目开发中，有些数据的数量是动态的，不确定的，可能是1条，也可能是多条。如人的证件，工作经历，项目经验等。在做这些数据的添加时就要使用动态表单

**1、使用介绍**

首先将 iview 官方的动态表单的代码全部复制出来，粘贴到项目里，看一下运行效果

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oKf5LiW5ZCb5a2Q_size_15_color_FFFFFF_t_70_g_se_x_16][]

代码如下

代码讲解

这里核心的内容是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这个数组，并添加了它的添加和删除的方法

运行效果如下

![4cf9f87741434d33be1f42882902e074.gif][]

这里在功能上没有问题，但是打开浏览器的开发者工具就会看到有1个警告

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oKf5LiW5ZCb5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16][]

为什么会产生这个警告呢？原因是这样的，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，读者可根据自己的业务进行自定义命名前缀，道理是相同的

运行效果如下

![b513b8bf06814c11a661ac46235465de.gif][]

没有了警告

至此完

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oKf5LiW5ZCb5a2Q_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6026c097b4ae41ab8de87eee0154a5dc.png
[4cf9f87741434d33be1f42882902e074.gif]: /images/20220828/70902818141b40e7958e57227a2a2d23.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oKf5LiW5ZCb5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/630ca91fedc247fa9c0d651843973a62.png
[b513b8bf06814c11a661ac46235465de.gif]: /images/20220828/50bd8a2864bf4da387b436d429053db4.png