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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
javascript使用call调用微信API
Dec 15 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
JS数组方法reduce的用法实例分析
Mar 03 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php中explode与split的区别介绍
2012/10/03 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
购房个人委托书范本
2014/10/11 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
试用期自我评价范文
2015/03/10 职场文书
校运会通讯稿
2015/07/18 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
vue修饰符.capture和.self的区别
2022/04/22 Vue.js