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,读者可根据自己的业务进行自定义命名前缀,道理是相同的
运行效果如下
没有了警告
至此完
文章浏览阅读930次。转自:http://blog.csdn.net/x_jjt/article/details/50733483一、环境变量的作用于全局变量是相似的,环境变量的生命周期一旦设置好环境变量并保存好,下次开机时还会存在,而全局变量在关机后会消失,只有在下次开机时才会产生一个新的全局变量。 全局变量可能大多数功能是用于进程间通信,而环境变量的作用就不仅仅是通信,而是提供各种程序运行参数,比如说常_uboot中环境变量ip代表的是什么
文章浏览阅读5.9k次。linux系统远程拷贝文件命令;_linux scp
文章浏览阅读4.9k次。1 2 3 4 1.首先这种写,在页面渲染的时候,浏览器不会读取script标签中的html代码2.外面不能获取到里面的div节点所以: 在使用时,要在script标签上加个ID可以供我们找到它, 即然做模版用,且里面的html代码不会被_"
文章浏览阅读2k次。规则引擎(RuleEngine)是一个有限状态机,通过入参实现状态转移,在Java中定义为JSR94规范。规则引擎目前的开源实现主要是JBoss家族的Drools,采用友好的Apache协议(意味着可以作为商业产品)。以及据说非常贵的ILOG引擎,还有一些国内引擎。1. 规则引擎的简介规则引擎一般用于处理请求报文总类繁多,业务控制复杂的场景,比如某个订单入口,某个网络的控制域,某个路由,比如_有限状态机 规则引擎
文章浏览阅读1.4w次,点赞11次,收藏12次。最近在开发中遇到了这么一个问题,我在构造一个Json字符串的时候,由于这个JSON字符串的一个属性本身也是一个JSON字符串,所以在转换成字符串的时候这个子JSON字符串中就带了'\'反斜杠字符。导致后面传参发送到接收方识别不了。由于我不想通过处理JSON字符串(直接把\替换成空串),而是直接传进来就是正常的。经过一系列的尝试,终于将其解决。一、问题复现: //子json串..._java json字符串中的\
文章浏览阅读879次,点赞28次,收藏21次。本文提出了一种新的混合结构CMT,用于视觉识别和其他下游计算机视觉任务,如目标检测和实例分割,并解决了在计算机视觉领域以野蛮力方式使用变压器的局限性。所提出的CMT结构利用cnn和变压器来捕获局部和全局信息,提高了网络的表示能力。_cmt 视觉架构
文章浏览阅读722次。一、程序员的特性技术出身的职场人特性很明显,与做市场、业务出身的职场人区别尤其明显。IT行业中常见的一些职场角色:老板、项目经理、产品经理、需求分析师、设计师、开发工程师、运维工程师等。开发工程师具有如下特征:1、逻辑思维清晰、严谨和细腻;但是有时不容易转弯,有些程序员容易较劲、钻牛角尖。2、性格偏内向、不善于沟通、表达和交际;但是在网络聊天工具上,有些显为幽默、能聊。...
文章浏览阅读267次。点击上方蓝字可直接关注!方便下次阅读。如果对你有帮助,麻烦点个在看或点个赞,感谢~文章首发公众号—— Pou光明程序中难免会使用到定时器,今天给大家介绍Linux中一种定时器的实现。Linux下还有很多其他定时的实现,如精确定时等,感兴趣的同志可以再做深入了解。编程到现在,其实很多工作都是在调用api,还没能完全脱离面向“谷歌”编程的实质,面对这种情形,如何破局呢?好巧啊,我也在思考。。。。。。一..._linux 定时统计服务器资源
文章浏览阅读1.1w次,点赞3次,收藏13次。我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式,第一种就是常见的方式,用定位我简单定义为三部曲:- 让包裹图片的盒子绝对定位,- left:50%,- Margin-left:图片宽度的一半看例子吧:<!DOCTYPE html><html lang="en"&..._bootstrap中实现图片居中
文章浏览阅读613次。Libsvm和Liblinear都是国立台湾大学的Chih-Jen Lin博士开发的,Libsvm主要是用来进行非线性svm 分类器的生成,提出有一段时间了,而Liblinear则是去年才创建的,主要是应对large-scale的data classification,因为linear分类器的训练比非线性分类器的训练计算复杂度要低很多,时间也少很多,而且在large scale data上的性_liblinear libsvm 求解过程
文章浏览阅读8k次,点赞3次,收藏24次。倾斜摄影自动化建模技术是近来国际遥感与测绘领域讯速发展起来的一项高新技术,该技术已逐步取代传统的手工建模。但在模型生产过程中由于航拍、空三pos参数等存在的问题会造成模型的空洞,扭曲等问题,这些都需要我们用一些软件来精细化修复。今天我们就来聊一下关于三维模型单体化修补的建模软件。01 Smart3D模型修的好不如一次就建好学习修复模型之前咱们先看看如何才能通过smart3..._倾斜摄影修模软件
文章浏览阅读447次。默认生成的类没有添加mfc头文件,记得自己在头文件添加以下两行。之后创建一个界面,右键资源文件,添加资源,选择Dialog。修改mfcdll.h和mfcdll.cpp。第二步右键解决方案创建一个mfc动态库。之后在这个类名前添加关键字静态导出。右键项目编译,生成静态库和动态库。添加mfcdll动态库路径。新建mfcEmu.cpp。控制台项目修改项目属性。第一步创建一个空项目。新建main.cpp。