el-form 多层级表单的实现示例

2023-07-16 21:34:05 64

前言

本篇文章基于vue、element-ui

需求

前端开发过程中，经常遇到表单开发的需求，element-ui为我们带来了极大的便利，前端只需要更专注于前端逻辑。

我们往往会遇到相对复杂的表单，比如下面的表单:

我们设计的时候可以把它设计成3级表单，即划分表单到每一个校验项(输入框，下拉框的等)

最终实现效果如下图所示:

实现

el-form使用，详情可参见：Form表单

有几个比较重要的属性：

ref相当于标签的id
model表单数据对象
rules表单验证规则
prop表单域model字段
label标签文本

在提交按钮的时候，执行validate方法即可；实时校验可在rules中设置校验项trigger:'change'即可

1.el-form设计

划分表单到每一个校验项(输入框，下拉框的等)，可以设计成3级表单

奖励设置这一个校验项稍微复杂一点，可以动态绑定model和rules实现子项的表单校验

2.el-form-item子项校验

校验比较简单，只需要获取到每一个表单对象，并执行validate即可，二级表单就遍历拿到二级表单独享执行同样的操作

定义form数据模型:

form:{
name:'',
seconde_form:[
{
packet_name:'',
},
],
},

封装一个check_form方法

/**
*表单校验方法
*@param{String}form_name
*/
function$check_form(form_name){
constform_component=this.$refs[form_name][0]?this.$refs[form_name][0]:this.$refs[form_name];
returnnewPromise((resolve,reject)=>{
form_component.validate(valid=>{
if(valid){
resolve();
}else{
reject();
}
});
});
}

点击按钮的时候执行checkParam方法

asynccheckParam(form_name){
try{
awaitthis.$check_form(form_name);
for(leti=0;i
到此这篇关于el-form多层级表单的实现示例的文章就介绍到这了,更多相关el-form多层级表单内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

el-form 多层级表单的实现示例

热门推荐

随机推荐