vue element动态渲染、移除表单并添加验证的实现


Posted in Javascript onJanuary 16, 2019

又接到新需求了吧~~

背景

在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加、移除表单,更加个性化的效果。

常见于填写个人信息、附加内容的表单

例如:

“工作经历”可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除

问题

在实现之前,提出几个问题

  • vue 怎么动态渲染或移除表单上去
  • v-model 怎么绑定动态添加表单的 value 值
  • 动态新增的表单如何验证
  • 动态表单怎么填写对应的 prop
  • ...

好吧,我当时也思考了一会,最后选择数组方式,动态渲染

代码实现讲解

利用数组,v-for 循环方式,可以完美实现动态渲染和移除,因为操作的只有对象数组而已

export default {
 name: 'vouchersDetail',
 data() {
  return {
   form: {
    regionName: '',
    regionCode: '',
  // 动态添加的对象数组
    azList: [
     {
      azName: '',
      logicCode: '',
      physicCode: ''
     }
    ]
   }
  }
 },
 computed: {
  // 至少保留一个动态表单的开关
  isShowCloseBtn() {
   return this.form['azList'].length > 1
  }
 },
 methods: {
  addItem() {
   // 点击添加表单的按钮,只需要将表单绑定的 value 作为对象 push 到对象数组
   this.form['azList'].push({
    azName: '',
    logicCode: '',
    physicCode: '',
    weight: ''
   })
  },
  deleteItem(index) {
   // 点击移除表单的按钮,根据点击的当前 index 移除对象数组的元素
   this.form['azList'].splice(index, 1)
  },
  goBack() {
   window.history.back(-1)
  }
 }
}

请格外注意动态添加表单的 rule 和 prop

每个动态添加的表单都要加上 rule

prop 需要根据对象数组下标绑定设置对应的 value(:prop="'azList' + index + '.azName'")

那么对应的 html 形式为

<div class="section-form" v-for="(item, index) in form.azList" :key="index"> 
 <span v-if="isShowCloseBtn" class="close" @click="deleteItem(index)">
  <i class="el-icon-close"></i>
 </span> 
 <el-form-item label="可用区名称:"
  :rules="[{ required: true, message: '可用区名称不能为空' }]"
  :prop="'azList[' + index + '].azName'"
  label-width="150px"> 
  <el-input placeholder="请输入可用区名称" v-model="item.azName" :maxlength="30"></el-input> 
 </el-form-item> 
 <el-form-item label="逻辑可用区编码:"
  :rules="[{ required: true, message: '逻辑可用区编码不能为空' }]"
  label-width="150px"
  :prop="'azList[' + index + '].logicCode'"> 
  <el-input placeholder="请输入唯一ID" v-model="item.logicCode" :maxlength="30"></el-input> 
 </el-form-item> 
 <el-form-item label="物理可用区编码:"
  :rules="[{ required: true, message: '物理可用区编码不能为空' }]"
  label-width="150px"
  :prop="'azList[' + index + '].physicCode'"> 
  <el-input placeholder="请输入唯一ID" v-model="item.physicCode" :maxlength="30"></el-input> 
 </el-form-item>
</div>

写在后面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
backbone简介_动力节点Java学院整理
Jul 14 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
详解React 条件渲染
Jul 08 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
深入koa-bodyparser原理解析
Jan 16 #Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 #jQuery
详解微信小程序之scroll-view的flex布局问题
Jan 16 #Javascript
vue开发环境配置跨域的方法步骤
Jan 16 #Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 #Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 #Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 #Javascript
You might like
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python中的二维列表实例详解
2018/06/19 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python温度转换华氏温度实现代码
2020/12/06 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
创建省级文明单位实施方案
2014/02/27 职场文书
师恩难忘教学反思
2014/04/27 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2015年试用期工作总结
2014/12/12 职场文书
办公室主任岗位职责
2015/01/31 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers