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

最新推荐文章于 2024-05-14 10:41:51 发布
最新推荐文章于 2024-05-14 10:41:51 发布
阅读量3.3k 收藏 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，读者可根据自己的业务进行自定义命名前缀，道理是相同的

运行效果如下

 没有了警告

至此完

悟世君子
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue+iview动态渲染表格详解
10-17
主要为大家详细介绍了vue+iview动态渲染表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
iview Form表单实现动态新增
weixin_45195355的博客
12-09 509
iview form 动态新增
2024年最全Vue UI 框架对比 element VS iview，手撕面简介
最新发布
2401_84418883的博客
05-14 837
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
用 iView 写一个动态表格
weixin_46823798的博客
09-08 783
用 iView 写一个动态的表格，包括添加、删除、复制一行，和表单验证
vue/iview动态表单+前后端分离：固定项+动态多项+表单验证+同时提交
Mei617的博客
06-05 617
背景 如题 前端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 722
根据当前登录用户角色动态控制是否展示业务经理查看状态列和大区经理查看状态列。列表中为金额的列，其值如果全为0则该列不展示。
vue iview实现动态新增和删除
12-28
本文实例为大家分享了vue iview动态新增和删除的具体代码，供大家参考，具体内容如下 <Form ref=capsuleAttr :model=capsuleAttr :label-width=100 style=width: 80%> (item, v-if=item.status key=index>...
iview form清除校验状态的实现
01-19
在iview 的官方api 中并没找到清除校验状态的方法，看了下源码，用一个粗糙的方法解决了。 源文件 form-item.vue 中的 resetField方法 是通过修改这两个属性的值清空状态和提示的 其实就是把 formItem 的两个属性值...
iview-admin项目源码和api
03-07
`iView`是一个针对`Vue.js`的高质量UI组件库，包含诸如按钮、表单、表格、导航、弹出层等多种常见的前端元素。其设计风格简洁、统一，易于上手，且对浏览器兼容性良好。`iView`的组件不仅美观，而且具有高度可配置...
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验
ding43930053的专栏
09-25 1466
刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。
根据配置动态生成有验证的表单
08-10
该组件使用了iview框架，以及iview中form表单引用的组件async-validator对表单进行验证
iview Form组件动态添加表单，并深层校验
shb7433185的博客
04-29 3457
今天遇到了iview动态添加表单，并且深度验证表单的问题。 功能如图： 科目可以动态新增，并且科目非空，成绩在0-100区间内。 html部分，v-for遍历form子属性scoreList。 内部FormItem prop规则为[子属性].[索引].[子属性] rules手动指定 ... <Table border :columns="column" :data="form.scor...
iview form 动态表单
weixin_43465508的博客
10-25 349
把需要输入的用v-show来验证就好了，可以实现 表单验证，还有红色星号的切换，真是不容易，发现前面得红色必选项跟着变换，但是表单验证输入了还是显示不能为空。然后我用了v-if 结果，红色星号在，表单验证确是可以的。
在vue中使用iview-ui表单中提交图片
Misaka_S的博客
05-09 3526
获取图片文件 使用了iviewui的upload组件来获取图片文件 <Upload :action="" :before-upload="handleBeforeUpload"> <Button icon="ios-cloud-upload-outline">Upload files</Button> ...
createform用法_GitHub - fengzhongye/form-create: 使用ivew动态创建form表单/use iview create form...
weixin_42513365的博客
01-14 794
form-create使用iview动态创建form表单具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能。1.1版本重大更新内部重构新增 省市区三级联动组件新增 组件事件扩展优化 文件上传,时间选择等组件待完善动态显示隐藏表单动态增加表单树形控件生成示例安装npm install form-...
vue和iview结合动态生成表单
m0_38081413的博客
11-28 3047
在项目中，表单作为用户输入占用很重要的一部分，目前的前端框架，基本对表单进行了一些简单的封装，如果输入项很多，以iview为例，会有一大堆的类似： <FormItem label="Input"> <Input v-model="formItem.input" placeholder="Enter something..."></Input...
使用View UI Table 表格拖拽排序
qq_515023980的博客
02-17 189
使用Iview Table 实现表格拖拽排序功能
使用Vue动态生成form表单
weixin_30832405的博客
04-25 2227
form-create 表单生成器具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。详细查看: github地址 npm地址 文档地址 如果对您有帮助，您可以在Github点右上角 "Star" 支持一下 谢谢！演示...
iviewui 动态表单 验证
11-20
iviewui是一个基于Vue.js的UI组件库，其中包含了动态表单组件。在使用iviewui动态表单时，可以通过其提供的验证功能来实现表单的验证。 在iviewui中，可以使用表单验证规则来对动态表单进行验证，例如必填项、最小长度、最大长度、格式验证等。通过设置相应的验证规则，用户在输入表单数据时会自动进行验证，并在不符合规则的情况下给出提示信息。 除了内置的验证规则之外，iviewui还支持自定义验证规则，用户可以根据实际需求编写自己的验证函数来实现更加灵活的表单验证。 另外，iviewui还提供了整个表单验证的状态管理，可以方便地获取表单验证的结果，并做出相应的处理。 总之，使用iviewui动态表单进行验证是非常方便和灵活的，通过简单的配置和编码，就可以实现各种复杂的表单验证需求。同时，iviewui的验证功能也能够帮助用户提高表单数据的准确性和完整性，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

悟世君子

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

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

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

打赏作者

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

抵扣说明：

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

余额充值