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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
BootStrap selectpicker
Jun 20 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
vuejs指令详解
Feb 07 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
vue实现下拉菜单树
Oct 22 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
深入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
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
实例讲解React 组件
2020/07/07 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python验证码识别的方法
2015/07/10 Python
Python中的日期时间处理详解
2016/11/17 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
彻底搞懂Python字符编码
2018/01/23 Python
python机器学习之随机森林(七)
2018/03/26 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
python多线程与多进程及其区别详解
2019/08/08 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
房屋改造计划书
2014/01/10 职场文书
女方回门宴答谢词
2014/01/14 职场文书
售后求职信范文
2014/03/15 职场文书
李敖北大演讲稿
2014/05/24 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
导游词之桂林
2019/08/20 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers