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>
推荐阅读
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应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...
wuwhs赞 12阅读 2.5k
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...
熊的猫赞 8阅读 1.2k
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...
卡颂赞 7阅读 7.5k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。