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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
jquery实现抽奖功能
Oct 22 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
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
怎么清空javascript数组
2013/05/11 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python实时监控cpu小工具
2018/06/21 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书