当前位置: 首页 > news >正文

点击加号添加新的输入框

实现点击加号添加新的输入框
实现如上图的效果

html部分:

<el-form-item class="forminput" v-for="(item,index) in formdata.description" :key="index" :label="'描述'+(index+1)" prop="description"><el-input v-model="formdata.description[index]"></el-input><el-button type="primary" icon="el-icon-plus" circle @click="adddescritpion"></el-button>
</el-form-item>

js部分:
data:

formdata:{name_en:'',name_cn:'',url:'',type:0,description:['']
}

按钮的方法adddescritpion:

adddescritpion(){this.formdata.description.push('');
}

css部分:
因为会有多个forminput,所以选取除了最后一个的forminput,并设置他们的后代元素el-button的显示模式为none,就会使得其他的加号都消失。

.forminput:not(:nth-last-child(1)) .el-button{display: none;
}

点击加号后,会在formdata的description数组中再加入一个空的字符串,v-for重新渲染,就会生成一个新的输入框

注意:input中的v-model不能绑定为item,会报错,因为这样绑定无法修改v-for源数组,因为写入别名就跟修改函数形参一样。应采用上面的数组形式绑定。

http://www.lryc.cn/news/97977.html

相关文章:

  • SQL AND OR 运算符
  • 6、C++内存模型
  • 上海市青少年算法2023年1月月赛(丙组)
  • 移动开发之Wifi列表获取功能
  • MyBatisPlus - 实体类 的 常用注解
  • vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能
  • Qt之切换语言的方法(传统数组法与Qt语言家)
  • qt root start faild
  • 数据结构—串
  • hive 全量表、增量表、快照表、切片表和拉链表
  • 数据结构07:查找[C++][B树Btree]
  • 在CSDN学Golang云原生(Kubernetes集群管理)
  • WPF实战学习笔记18-优化设计TodoView
  • Python版day59
  • [SQL挖掘机] - 算术运算符
  • 机器学习基础 数据集、特征工程、特征预处理、特征选择 7.27
  • Sass 常用的功能!
  • chmod命令详细使用说明
  • ICC2如何计算Gate Count?
  • Qtday3作业
  • 全球程序员需要知道的50+网址,有多少你第一次听说?
  • Matlab中实现对一幅图上的局部区域进行放大
  • mysql-速成补充
  • 微信小程序,商城底部工具栏的实现
  • Lab———Git使用指北
  • ChatGPT的工作原理:从输入到输出
  • redis数据库与主从复制
  • js加载和长任务
  • 利用Stable diffusion Ai 制作艺术二维码超详细参数和教程
  • 【C语言课程设计】图书管理系统