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

最新推荐文章于 2024-09-24 08:32:13 发布
最新推荐文章于 2024-09-24 08:32:13 发布
阅读量3.4k 收藏 8
点赞数 1
分类专栏： View UI 文章标签： node.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsjzzcbq/article/details/120579017
版权

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，读者可根据自己的业务进行自定义命名前缀，道理是相同的

运行效果如下

 没有了警告

至此完

悟世君子
关注
专栏目录
iview 级联选择组件_表单组件 - Cascader 级联选择 - 《View UI（即iView）4.2 使用手册》 - 书栈网 · BookStack...
weixin_39613839的博客
12-22 932
Cascader 级联选择概述从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。相比 Select 组件，可以一次性完成选择，体验更好。代码示例基础用法级联选择对数据有较严格要求，请参照示例的格式使用data，每项数据至少包含 value、label 两项，子集为 children，以此类推。value 为当前选择的数据的 value 值的数组，比如 ['beijing', '...
vue+iview动态渲染表格详解
10-17
主要为大家详细介绍了vue+iview动态渲染表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用 iView 写一个动态表格
weixin_46823798的博客
09-08 846
用 iView 写一个动态的表格，包括添加、删除、复制一行，和表单验证
iView 使用教程
最新发布
gitblog_00375的博客
09-24 302
iView 使用教程 iview A high quality UI Toolkit built on Vue.js 2.0 项目地址: https://gitcode.com/gh_mirrors/iv/iview ...
iview form 动态表单
weixin_43465508的博客
10-25 398
把需要输入的用v-show来验证就好了，可以实现 表单验证，还有红色星号的切换，真是不容易，发现前面得红色必选项跟着变换，但是表单验证输入了还是显示不能为空。然后我用了v-if 结果，红色星号在，表单验证确是可以的。
iview Form表单实现动态新增
weixin_45195355的博客
12-09 565
iview form 动态新增
Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验
ding43930053的专栏
09-25 1643
刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。
View From 表单
qq_49428237的博客
03-07 222
From表单官方代码逐句解析
iview4.0+最新官方离线教程
03-04
1. **组件体系**：iView提供了包括按钮、表格、对话框、提示、布局、导航、表单在内的各种常见UI组件，每个组件都经过精心设计，易于使用且可定制化程度高。 2. **安装与引入**：学习如何在项目中安装iView，可以...
ViewUI组件库 v4.7.0.zip
04-02
ViewUI，又称为iView，是一个基于Vue.js的UI组件库，旨在提高开发效率，提供一致且易于使用的用户界面。Vue.js是一种轻量级的前端JavaScript框架，以其简洁的API和高性能著称，而ViewUI则是Vue.js生态中的重要组成...
viewUI 4.7最新版离线帮助文档，献给前端开发工程师的宝典。
04-26
1. **组件介绍**：详细列出viewUI提供的所有组件，如按钮、表单、表格、布局、导航、弹窗等，并解释它们的用途、属性、方法以及如何在项目中使用。 2. **API参考**：深入解析每个组件的API，包括组件选项、事件、...
根据配置动态生成有验证的表单
08-10
该组件使用了iview框架，以及iview中form表单引用的组件async-validator对表单进行验证
vue iview实现动态新增和删除
12-28
本文实例为大家分享了vue iview动态新增和删除的具体代码，供大家参考，具体内容如下 <Form ref=capsuleAttr :model=capsuleAttr :label-width=100 style=width: 80%> (item, v-if=item.status key=index>...
vue/iview动态表单+前后端分离：固定项+动态多项+表单验证+同时提交
Mei617的博客
06-05 642
背景 如题 前端iView template <template> <Form ref="formValidate" :model="formValidate" :label-width="80" style="width: 300px" :rules="ruleValidate" > <Form-Item label="测试" prop="test"> <i-Input type="text" v
iView组件动态控制表格列的显示与隐藏
qq_42772400的博客
05-16 850
根据当前登录用户角色动态控制是否展示业务经理查看状态列和大区经理查看状态列。列表中为金额的列，其值如果全为0则该列不展示。
vue+iview table实现动态表头且嵌套子级表头,可删除
weixin_45333006的博客
05-07 577
目前项目是iview组件库的Table组件,需要使用到动态表头, 添加时段这里就不赘述了,主要说一下动态表头且有子级表头的实现思路。表头名字是用户输入的, 每个动态表头对应一个子级表头包含面积和单价是固定的。3.添加时取值数组中的数用于添加唯一的key，并给列表数据中对应的key添加数据。用户添加一个时间段横向构建一条数据, 添加一个类型则在表格纵向构建一条数据。ps: 这里的实现如果大家有其他思路，欢迎探讨~1.先定义一个数组用于方便表头识别的唯一key。2.定义一个用于处理动态表头的公共方法。
iview Form组件动态添加表单，并深层校验
shb7433185的博客
04-29 3541
今天遇到了iview动态添加表单，并且深度验证表单的问题。 功能如图： 科目可以动态新增，并且科目非空，成绩在0-100区间内。 html部分，v-for遍历form子属性scoreList。 内部FormItem prop规则为[子属性].[索引].[子属性] rules手动指定 ... <Table border :columns="column" :data="form.scor...
在vue中使用iview-ui表单中提交图片
Misaka_S的博客
05-09 3637
获取图片文件 使用了iviewui的upload组件来获取图片文件 <Upload :action="" :before-upload="handleBeforeUpload"> <Button icon="ios-cloud-upload-outline">Upload files</Button> ...
vue+iview 动态循环表头+编辑单元格
不积跬步何以至千里
07-02 1350
先上效果图: 需求: 1.动态循环后端返回的表头 以及 表格数据 2.鼠标悬浮动态列 显示key:value 3.编辑table里的 单元格 动态循环表头 因为是后端返回表头数组 固用不了render 只能换种方式用slot动态循环显示表头 具体如下 <Table :no-data-text="$t('common.noData')" :columns="tableColumns" :data="tableData" border> <!-- 资源ID --> &l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悟世君子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值