Vue ElementUi动态表单(多个表单) 的校验及提交

恳求sf的管理大大,不让驳回我的文章了,我是把文章的好多注释直接写到代码里边了,并不是文章太短

前言

有这么一个需求,根据登录用户的权限,页面上会动态显示几个表单,是的,独立的几个表单(就是有这样的需求)。
这些动态的表单呢,样式都一样,都需要做校验,并且提交的时候,只能提交有权限且验证通过的表单
线上demo:http://an888.net/sf/checkform/#/
github:https://github.com/Mrblackant...
效果如图:图片描述

思路

1.拥有全部的权限的用户会展示,ABC三个表单,所以我们先用v-for将三个表单渲染出来;
2.根据登录用户的权限,我们在初始化的时候,控制ABC哪些表单显示,demo里我用用户小明和小红做演示;
3.模拟用户切换的时候,要将表单重置;
4.提交的时候,我们只校验有权限的表单,只提交校验通过的数据;
5.利用new peomise以及Promise.all方法同时对几个表单校验;
我感觉理解逻辑还是要结合着代码,所以我把注释写的很具体,这5个思路在代码注释里都有体现,有问题看注释就能明白

代码

<template>
  <div class="hello">
    <!-- 模拟 用户选择 -->
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" @change="userChange(tabPosition)">
      <el-radio-button label="xm">用户:小明</el-radio-button>
      <el-radio-button label="xh">用户:小红</el-radio-button>
    </el-radio-group>
    <!-- form card -->
      <el-card class="box-card" v-for="(item,index) in makeData" :key="item.index" v-if="item.formShow">
      <div slot="header" class="clearfix"><span>{{item.formName}}</span></div>
         <el-form  :inline="true" :ref="item.formRef" :model="item.formModel" class="demo-form-inline">
            <el-form-item label="审批人" prop='user' :rules="[{ required: true, message: '审批人不能为空'}]">
               <el-input v-model="item.formModel.user" placeholder="审批人"></el-input>
            </el-form-item>
             <el-form-item label="区域" prop='region' :rules="[{ required: true, message: '区域不能为空'}]">
               <el-input v-model="item.formModel.region" placeholder="审批人"></el-input>
            </el-form-item>

        </el-form>
</el-card>
<!-- 提交 -->
<el-row type="flex" justify="center">
  <el-button type="primary" plain @click="enterForm">提交</el-button>
</el-row>
  </div>
</template>

<script>
export default {
  mounted(){
    this.userChange('xm')//模拟登录的是小明
  },
  data () {
    return {
     makeData:[{
       formRef:'formFirst',//表单ref
       formModel:{user:'',region:''},//表单model
       formShow:'',//表单是否显示的控制
       formName:'表单A'//表单标题
      },{
      formRef:'formSecond',
       formModel:{user:'',region:''},
       formShow:'',
       formName:'表单B'

      },{
        formRef:'formThird',
       formModel:{user:'',region:''},
       formShow:'',
       formName:'表单C'

      }],
      xm:[true,true,true],//用户小明的权限
      xh:[true,true,false],//用户小红的权限
      tabPosition:'xm'//选择用户
     
        }
  },
  methods:{
  
  enterForm(){//动态表单提交
    console.log(this.$refs.formFirst)

let  arrForm=[]//哪些表单需要做校验
let  arrModel=[]//表单的值
let  newArr = [] //承接promise的返回结果
let _self=this
this.makeData.forEach((item,index)=>{//将有权限的表单做校验等等
  if (item.formShow) {
      checkForm(item.formRef)//校验
      arrModel.push(item.formModel)//需要校验的表单的值
  }
})

 function checkForm(arrName) { //根据form表单的ref,动态生成promise,再对其坐表单校验,都通过了再去做处理
      var result = new Promise(function(resolve, reject) {
          _self.$refs[arrName][0].validate((valid) => {
              if (valid) {
                  resolve();
              } else { reject() }
          })
      })
      newArr.push(result) //push 得到promise的结果
}

Promise.all(newArr).then(function() { //都通过了
      console.log(arrModel)
      alert('恭喜,表单全部验证通过')
    }).catch(function() {
        console.log("err");
    });
  },
  userChange(val){//当前登录用户的change
    this.makeData.map((item,index)=>{//根据用户的权限决定显示哪些表单
      var c=item.formRef
      if (this.$refs[c]&&this.$refs[c][0]) { this.$refs[c][0].resetFields()}//模拟切换用户时,将表单置空
      return item.formShow=this[val][index]
    })
  }
  }
}
</script>

<style scoped>
.box-card{
  margin-bottom:30px;
}
</style>

可以假装很努力,但结果不会骗你

1.1k 声望
165 粉丝
0 条评论
推荐阅读
mpvue写小程序遇到的问题总结(自己用mpvue实现一个小程序的tabbar,vantUi的使用)
公司要开发一个小程序,面向用户分为3种角色,所以要自己手写个tabbar(文章编辑中,届时将链接放过来)因为也是时隔很久写小程序,就选择了跟vue相近的mpvue来写,或多或少也遇到了点问题,现总结一下。

大师兄5阅读 5.4k评论 4

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.9k评论 9

用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用&lt;keep-alive&gt;缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.5k

封面图
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.2k

封面图
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 7.5k评论 3

封面图

可以假装很努力,但结果不会骗你

1.1k 声望
165 粉丝
宣传栏