当前位置: 首页 > news >正文

校验v-for中的form表单

场景:
整体外层一个form,内层多个form组成。
点击新增会在增加一个from表单,点击删除即删除一个form。

视图层:

<div      
    v-for="(item, index) in actionData"      
    :key="item"      class="form-wrapper"  
>    
    <el-form        
        ref="actionForm"        
        :model="item"        
        label-width="68px"        
        class="item-form"    
    >    
    </el-form>
</div>

数据层

data:

actionData: [{ id: 'no1', name: '前端'}];

methods:

/* add */
const add = () => {  actionData.push({});};
/* del */
const del = (index) => {  actionData.splice(index, 1);};

/* -----校验所有form------ */

const validate = (refs) => {   
    const promises = refs.map((form, index) => form.validate());   
    return Promise.all(promises);
};

/* submit */
async function submit = () => {
    try {
        rule = await validate(this.$refs.actionForm);   
    } catch (e) {     
        rule = e;   
    };   
    if (!rule) {     
        return false;   
    } else {     
        /* todo*/   
   }
};

总结:

1、for 循环体 或者map里是不支持await。

2、避免层层嵌套的回调校验。

如果验证失败自动滚定位到校验失败的位置:

const restpotion = () => {  
    let anchor = document.querySelectorAll('.el-form-item__error')[0]; 
        anchor.scrollIntoView({
            block: 'end',                
            behavior: 'smooth',  
    });
};

参考:https://juejin.cn/post/7049342392515690526

http://www.dtcms.com/a/21478.html

相关文章:

  • 三、Java中七大常用锁实战
  • firefox的升级
  • 机器学习:k近邻
  • MySQL 联合索引的最左匹配原则
  • pandas(12 IO工具和稀松数据)
  • 算法题(69):搜索插入位置
  • BY组态:构建灵活、可扩展的自动化系统
  • 深入HBase——Bigtable
  • kamailio中Core Cookbook 核心配置手册
  • MVC模式和MVVM模式
  • Linux网络 | 多路转接epoll
  • 动手实现一个PDF阅读器
  • 深度解析前端性能优化:策略与实践
  • 2025年-数据库排名
  • 《红色警戒:兵临城下》 游戏软件安装步骤与百度网盘链接
  • 无题 -- 想做什么
  • unity学习44:学习Animator 的一个动作捕捉网站,实测好用
  • Java + Vosk 开启麦克风离线语音识别新纪元!
  • XXL-Job入门
  • vue+elementplus创建初始化安装
  • 【pytorch】weight_norm和spectral_norm
  • CentOS 7操作系统部署KVM软件和创建虚拟机
  • matlab-simulink难点记录1
  • Windows环境安装部署minimind步骤
  • Level DB --- two_level_iterator
  • win11安装wsl报错:无法解析服务器的名称或地址(启用wsl2)
  • 随机规划场景中的两类目标利润概率模型
  • 如何通过AI让PPT制作更轻松:从AI生成PPT到一键智能生成
  • C++11新特性之final
  • 【Erdas实验教程】007:图像融合(多波段+高光谱)