el-form表单在循环里如何写rules表单校验,解决办法

el-form表单在循环里如何写rules表单校验,解决办法

在日常开发中我们经常可以遇到 在form中 循环嵌套多个的情况 比如点击加减新增删除 并且还需要校验表单如何写呢?

实现办法

1.html (举例)

html 复制代码
contractFeesForm 为总数据源 
 <el-form :model="contractFeesForm" ref="contractFeesFormRef" :rules>
 这里的rules需动态生成
<div v-for="(contractItem, contractIndex) in contractFeesForm.payment">
  <el-divider></el-divider>
  <el-row :gutter="24">
    <el-col :span="8">
     这里 我们既然是在循环内 在每个item上绑定的 prop 就不能是固定写死的 不然没办法进行表单校验 就需要写成 xxxx[0,1,2......].属性值这样的 index 为动态的
      <el-form-item :prop="`payment[${contractIndex}].payment_type`" label="名称">
        <el-select
          v-model="contractItem.payment_type"
          filterable
          clearable
          placeholder="请选择"
        >
          <el-option v-for="v in paymentList" :label="v.name" :value="v.id" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
    	这个地方也同理 对应该el-select的数据源
      <el-form-item :prop="`payment[${contractIndex}].payment_unit`" label="名称">
        <el-select v-model="contractItem.payment_unit" filterable clearable placeholder="请选择">
          <el-option v-for="v in paymentunitList" :label="v.name" :value="v.id" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
    	 这个地方也同理 对一个该el-select的数据源
      <el-form-item :prop="`payment[${contractIndex}].payment_mode`" label="名称">
        <el-select v-model="contractItem.payment_mode" filterable clearable placeholder="请选择">
          <el-option v-for="v in paymentmodeList" :label="v.name" :value="v.id" />
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
 </div>

2.js

typescript 复制代码
// 动态生成校验规则
const rules = ref()
//rules方法封装
const generateFieldRules = (fields: string[], message: string) => {
//fields 为 payment[1,2,3...].xxx
//message 为 提示校验的内容
  return fields.reduce(
    (acc, field) => {
      acc[field] = [{ required: true, message, trigger: 'blur' }]
      return acc
    },
    {} as Record<string, any>
  )
}
const updateRules = () => {
  const newRules: Record<string, any> = {}
  //我们获取payment这个数组并进行forEach 循环 主要是获取 index 和 字段名拼接
  contractFeesForm.value.payment.forEach((_, index) => {
    const paymentFields = [ // 这里的字段就是需要校验的字段
      'payment_type',
      'payment_unit',
      'payment_mode'
       ... ]
    //使用Object.assign进行对象拼接拷贝
    Object.assign(
      newRules,
      //在这里调用上面封装好的rules方法将对应的 field 和 index 拼接进去
      generateFieldRules(
        paymentFields.map((field) => `payment[${index}].${field}`),
        '请输入'
      )
    )
  })
  //校验赋值
  rules.value = { ...newRules }
}
// 初始更新校验规则
updateRules()

3,然后我们在确认校验操作逻辑里

typescript 复制代码
const contractFeesFormRef = ref<FormInstance | null>(null)
contractFeesFormRef.value.validate(async (valid: boolean) => {
    if (valid) { .... // 即可
相关推荐
前端大白话14 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys16 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话17 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村23 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg501727 分钟前
Vue回调函数中的this
前端·javascript·vue.js
程序猿大波29 分钟前
基于Java,SpringBoot,Vue,HTML宠物相亲配对婚恋系统设计
java·vue.js·spring boot
前端太佬29 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200440 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼40 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_09271 小时前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端