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

又接到新需求了吧~~

背景

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

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

例如：

“工作经历”可以用户自己点击继续添加按钮，在原有的表单后面 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>

写在后面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue ElementUi同时校验多个表单(巧用new promise)

    前言 有ABCD四个表单,提交的时候同时校验(是的,后台管理系统的需求就是这样),巧用new promise. 实现的方法有很多种,我讲下自己觉得比较优雅的方式,欢迎各位大大的指正哈. 代码 let formArr=['formA','formB','formC','formD']//假设这是四个form表单的ref var resultArr=[]//用来接受返回结果的数组 var _self=this function checkForm(formName) { //封装验证表单的函数 va

  • vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

    如果是已经有点经验的同学,可以直接看下面这个函数,应该就能明白怎么回事,新手可以看下面的详细教程. 函数: handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); } 详细教程: 1.首先,做一个表格,用于显示信息:代码如下: <el-table :data="users" highlight-current-row v-loa

  • element 结合vue 在表单验证时有值却提示错误的解决办法

    绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na

  • vue elementui form表单验证的实现

    vue elementui form表单验证的实现

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ,基于此封装了一些 可复用的代码. 2.分析  vue给了我们不一样的前端代码体验  element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 .双剑合璧 天下无敌!  但每个公司的代码风格不同  用户

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • Vue ElementUI之Form表单验证遇到的问题

    Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

  • vue中使用element-ui进行表单验证的实例代码

    vue中使用element-ui进行表单验证的实例代码

    element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • vue使用Element组件时v-for循环里的表单项验证方法

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

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

    又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内容的表单 例如: "工作经历"可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除 问题 在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值 动态新增的表单如何验证 动态表单怎么填写对应的 prop ... 好吧,我当时也

  • Vue+Element实现动态生成新表单并添加验证功能

    首先有一个这样的需求,表单中默认有一个联系人信息,用户可以再添加新的联系人信息 点击添加更多联系人之后 官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的新增,可以考虑的实现方法是先写死一个必须的表单,需要新增的两个表单放在一个div里,在div中使用v-for生成,达到同时新增的效果 代码如下 //必填一个联系人的表单 <el-form-item class="rules" label="通知对象:" prop="noti

  • Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档. 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 . 首先在 routes/web.php 中新增两条路由规则: Route::get('post/create', 'PostController@create'); Route::post('post/save', 'PostController@save'); 然后在项

  • Element通过v-for循环渲染的form表单校验的实现

    Element通过v-for循环渲染的form表单校验的实现

    目录 普通的form表单校验 v-for 循坏的表单校验 实现的代码 普通的form表单校验 日常业务开发中,对于中后台管理系统,form表单校验是一个很常见的问题. 查阅Element官方文档,我们了解到,form表单校验是这样的,需要给所校验的el-form-item添加prop属性值,这个属性值便就是当前元素v-model 所绑定的值.如图所示: v-for 循坏的表单校验 那么问题来了,通过v-for 遍历循环渲染的form表单怎么添加校验呢?主要问题就在于其prop了. 再次阅读官方文

  • 使用vue中的混入mixin优化表单验证插件问题

    这段时间开发的时候使用到了这个表单校验插件,用起来比较麻烦就不说了,还有较严重的缺陷.自己最终还是抽空把这个插件进行了一些优化,虽然优化的方式和当初自己定下的方向不怎么相同,但是就使用体验上来说还是提高了很多. 1. 实际开发中遇到的问题 在上面的文章中提及了一些表单插件的问题,主要针对的是插件开发本身存在的问题.下面我总结下使用中存在的问题: 每个使用表单校验的元素都需要添加 v-check 类名,比较麻烦. 必须在提交表单按钮上使用 v-checkSubmit 指令进行表单校验,提交函数必须

  • vue + element动态多表头与动态插槽

    目录 一.需求 二.效果 三.全部代码 一.需求 满足用户自行配置表格,减少对系统代码维护量. 二.效果 表头json: 说明:scope(字段名可另取)为是否对该列开启插槽.有propChildren包含多级表头. tableHead: [{ key: '1', label: '日期', prop: 'date', width: '100', headerAlign: 'center', align: 'center', scope: false, sortable: true }, { ke

  • vue开发中后台系统复杂表单优化技巧

    目录 引言 表单校验 使用computed进行表单校验优化 表单拆分 表单兄弟组件的数据通信问题 引言 在中后台系统的日常开发中,表单必不可少,当表单内容比较多,例如有上百个字段(这一点都不夸张,血淋淋的现实)时,代码往往也变得复杂且难以维护,加上各种动态联动的表单校验,无疑让我们的页面开发过程雪上加霜,本文将结合自己平时的开发习惯,分享一下在大表单开发中如何处理复杂的表单校验,以及如何对表单进行拆分,减少单个文件堆积过多的代码内容. 表单校验 <template> <el-form r

  • Vue数据增删改查与表单验证的实现流程介绍

    Vue数据增删改查与表单验证的实现流程介绍

    目录 1. 准备工作 2. 弹出窗口 3. 新增更新功能 4. 删除功能 5. 表单验证 6. 接口文档 1. 准备工作 后台服务接口,对书本的增删改查操作 2. 弹出窗口 进入ElementUi官网, 找到Dialog对话框,可以参考“嵌套表单的dialog”实现. 该步骤先实现弹出窗口的前端逻辑,并不会调用后台接口服务进行实际的业务操作. BookList.vue <!-- 弹出窗口:增加和修改书本信息共用一个弹出窗口,需要根据用户的选择动态的设置弹出窗口的标题 :tile 通过绑定值的方式

  • jquery 动态增加,减少input表单的简单方法(必看)

    html代码如下 <html> <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr> <tbody class="input_fields_wrap"></tbody> </html> js代码如下 <script> var m

  • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    1.使用Vue.js实现双向表单数据绑定,例子 <!--html代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r

随机推荐