vue3.0中使用element UI表单遍历校验问题解决

问题

在使用vue3.0写项目的时候遇到一个需要遍历的表单,可以增加删除表单对象

不考虑校验问题的话,就是简单的数组包form对象。涉及校验的时候,按照以往的写法就是绑定ref值,然后调用组件的validate方法【form表单中配置rule规则】。

解决方法就是将数组内嵌在一个对象中,对象的结构跟我们定义的form对象结构一致

//我们需要遍历的form对象数组
const arr = [
    {
        name:'',
        sex:'',
        age:'',
    },{
        name:'',
        sex:'',
        age:'',
    }
]
//处理后的对象
const afterForm = {
    name:'',
    sex:'',
    age:'',
    child:arr,//这里的arr就是我们需要遍历的数组【这个key值可以随便取,不一定非得是‘child',尽量不要出现歧义就好】
}

然后就是html中的dom结构写法

<el-dialog v-model="addPageVisible" width="1000px" title="新增页面参数配置" @closed="closeDialog">
      <el-form :model="form" label-width="120px" :inline="true" ref="ruleFormRef" :rules="rules">
        <el-card v-for="(item, index) in form.child" :key="index" shadow="hover" class="mb20">
          <el-form-item label="页面名称:" :prop="`child[${index}].pageName`" :rules="rules.pageName">
            <el-input v-model.trim="item.pageName" class="length-limit"></el-input>
          </el-form-item>
          <el-form-item label="页面路由:" :prop="`child[${index}].routerName`" :rules="rules.routerName">
            <el-input v-model.trim="item.routerName" class="length-limit"></el-input>
          </el-form-item>
          <el-form-item label="页面类型:" :prop="`child[${index}].businessType`" :rules="rules.businessType">
            <el-select v-model.trim="item.businessType" class="length-limit">
              <el-option
                v-for="item in bussinessOptions"
                :value="item.value"
                :label="item.label"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="pageManage__dialog-foot">
            <el-button type="primary" round @click="addNewForm" v-if="index === allForm.length - 1"
              >新增配置表单</el-button
            >
            <el-button round :disabled="allForm.length === 1 && index === 0" @click="deleteForm(index)"
              >删除表单</el-button
            >
          </div>
        </el-card>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button round @click="addPageVisible = false">取 消</el-button>
          <el-button round type="primary" @click="submitNewPage">提交</el-button>
        </span>
      </template>
    </el-dialog>
//这是我实际项目的页面,所以定义的参数名可能不太一样

写法上跟一般的form表达差不多,只是我们el-form绑定的model值应该是我们处理过的对象,主要有两个地方需要注意

el-form-item上面绑定的prop值应该写成 :prop="child[${index}].pageName",rules也要绑定到对应的值。

const rules = reactive({
      pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
      routerName: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
      businessType: [{ required: true, message: '请选择页面类型', trigger: 'change' }],
    })

考虑到我们需要用的数组会有数量变化,可以直接用computed计算属性去得到处理后的数组

const form = computed(() => {
      return { pageName: 'string', routerName: 'string', businessType: 'string', child: allForm.value }
    })

然后就能成功了!!

总结

我自己的理解,就是将我们需要校验的值在一个伪造的form对象中处理,然后内层遍历的的真实form对象可以用指定值的方式去绑定校验规则。

到此这篇关于vue3.0中使用element UI表单遍历校验问题解决的文章就介绍到这了,更多相关element表单遍历校验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+element实现表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules="rules";ref="reference" 2.在el-form-item定义prop="name"; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 templa

  • Vue element-ui父组件控制子组件的表单校验操作

    方法一: 父组件代码: <template> <div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保 存</el-button> </div> </template> <

  • Vue Element-ui表单校验规则实现

    目录 1.前言 2.规则校验的入门模式 2.1.示例代码 2.2.form项 2.3.prop项 2.4.rules项 2.5.rule项 2.6.使用规则 2.7.规则校验的核心 3.规则校验的进阶模式 3.1.嵌套对象属性名 3.2.自定义校验器validator 3.3.类型type 3.3.数据转换transform 3.4.数值范围Range 3.5.枚举值 3.6.正则Pattern 3.7.长度len 3.8.空白whitespace 3.9.i18n 4.规则校验的高级模式 4.

  • vue elementUI 表单校验功能之数组多层嵌套

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo

  • ElementUI多个子组件表单的校验管理实现

    背景 公司项目中所用到的前端框架是Vue.js + ElementUI,因为项目的业务场景中有很多的大表单,但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好.最初的项目为了方便,常常把多个表单写在一个.vue组件中,这导致单文件的代码量巨大,逻辑十分复杂.目前为了维护方便,表单的拆分就变得十分重要. 现在做了以下的Demo说明我们的业务场景,父组件是App.vue,该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件(在实际的业务场景中,可能多达10

  • Vue ElementUi同时校验多个表单(巧用new promise)

    前言 有ABCD四个表单,提交的时候同时校验(是的,后台管理系统的需求就是这样),巧用new promise. 实现的方法有很多种,我讲下自己觉得比较优雅的方式,欢迎各位大大的指正哈. 代码 let formArr=['formA','formB','formC','formD']//假设这是四个form表单的ref var resultArr=[]//用来接受返回结果的数组 var _self=this function checkForm(formName) { //封装验证表单的函数 va

  • vue elementUI 表单校验的实现代码(多层嵌套)

    嵌套对象的校验 项目中使用的vue+elementUI进行开发,已经用了有一段时间了,感觉表单校验是每一个前端开发人员都避免不了的需求.在一些前端可以自行校验的情况下,先通过前端校验,校验不通过不发送请求,直到满足校验规则,再发送请求给后端,从而提升用户体验. elementUI对表单的校验有自己的方法,要求传入model的必须为一个对象.但如果数据结构比较复杂,对象里面又嵌套对象,该如何校验?本文给出多层对象嵌套的方法. example <template> <el-form :mod

  • 详解element-ui 表单校验 Rules 配置 常用黑科技

    type 指示type要使用的验证器.可识别的类型值为: string:类型必须为string.type 默认是 string // 校验 string: [ {type: 'string', message: `请输入字符串`, trigger: 'blur'} ] <el-form-item label="测试字段" prop="string"> <el-input v-model.number="form.string"

  • element多个表单校验的实现

    在项目中,经常会遇到表单检验,单个表单检验可查看element的官网文档,里面有详细的介绍.在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法,欢迎大家留言,一起探讨相关技术,请多多指教. 这里主要用到 Promise 来解决. 关于Promise方法举个例子来抽象理解: 周末想吃火锅,打电话告诉小A,过来我这打火锅,菜都齐了,就差点海鲜,你来的时候带点.接着打电话找朋友小B,过来我这打火锅,有海鲜,肉少了点,你来的时候带点.在接着打电话找朋友小C:过来我这打火锅,啥菜都有了,差点

  • Vue elementUI表单嵌套表格并对每行进行校验详解

    目录 效果展示 代码链接 关键代码 表格数据 组件嵌套 校验方法 重置方法 完整代码 总结 效果展示 先看看这是不是需要的效果^_^ 如图,ElementUI 表单里嵌套了表格,表格内每行能进行[保存][新增][编辑][删除][重置]等操作,同时可以对每行的某些字段进行校验(而不是整个表单校验!),这种需求很常见,所以记录下来. 代码链接 gitee地址 关键代码 表格数据 // 数据格式必须是[对象嵌套数组],[form]绑定表单,[list]绑定表格 form: { // 表格数据 list

随机推荐