vue+element ui多表单统一验证

最新推荐文章于 2024-06-05 13:14:18 发布

as-鲨鱼辣椒

最新推荐文章于 2024-06-05 13:14:18 发布

阅读量782

点赞数

文章标签： js javascript html vue.js elementui

本文链接：https://blog.csdn.net/weixin_47534571/article/details/110392271

版权

本文介绍了如何在Vue.js项目中结合Element UI库，处理多个动态生成的表单，并实现统一的验证功能。在产品编辑场景中，每个产品可以关联多个应用，编辑时从后端获取应用参数集合，通过HTML代码动态创建表单。当点击确认按钮时，会触发对所有表单的验证，只有当所有表单验证通过后，才会将数据保存到数据库。

摘要由CSDN通过智能技术生成

场景

每个产品对应多个应用,当对产品进行修改的时,可同时修改应用相关参数,从后端接受应用参数集合,每个应用生成动态表单,点击确认按钮,对所有表单进行统一认证,验证成功再将数据保存至数据库;
在这里插入图片描述

HTML代码

<el-collapse v-if="active === 1" v-model="activeNames" accordion>
        <div v-for="(application,index) in dialogApplicationList">
          <el-collapse-item :name="index">
          //特别注意ref这里的index,填在$refs['xx']--xx就是这个ref
            <el-form :ref="'app