vue+element多层表单校验prop和rules

核心点:外层循环是item和index,内层循环是item2和index2
如果都是定义的同一个属性名

外层循环得写:prop="'block.'+index+'.numerical'"

同理内层循环就得写:prop="'objectSpecs.'+ index2 + '.numerical'"
校验函数方法 :rules="getRules(item2, item2.name)"

html 复制代码
<div class="block" v-for="(item, index) in block" :key="index">
  <el-form ref="blockForm" :model="item" :rules="formBlockRule" :inline="true">
    <el-form-item>多个formItem...省略一下</el-form-item>
    <div v-for="(item2,index2) in item.objectSpecs" :key="index2">
      <!--输入框-->
      <el-form-item v-if="item2.input" 
                    :prop="'objectSpecs.' + index2 + '.numerical'" 
                    :label="item2.name" label-width="130px" 
                    :rules="getRules(item2, item2.name)">
        <el-input :placeholder="item2.placeholder" 
                  v-model="item2.numerical" 
                  :onkeyup="numberFormate(item2, 'numerical')" 
                  :disabled="readOnly">
        </el-input>
      </el-form-item>
      <el-form-item v-if="item2.input">
        <span>{{item2.units}}</span>
      </el-form-item>
      <!--选择框-->
      <el-form-item v-if="!item2.input" 
                    :prop="'objectSpecs.' + index2 + '.numerical'" 
                    :label="item2.name" label-width="130px" 
                    :rules="getRules(item2, item2.name)">
        <el-select v-model="item2.numerical" 
                   placeholder="请选择" 
                   :disabled="readOnly">
          <el-option v-for="(key,value) in item2.numericalList" 
                     :key="value" 
                     :label="key" 
                     :value="value">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
  </el-form>
</div>
javascript 复制代码
getRules(item, name) {
  if(item.input){
    return [
      { required: true, message: '请输入' + name, trigger: 'blur' },
    ]
  }else{
    return [
      { required: true, message: '请选择' + name, trigger: 'change' }
    ];
  }
}
相关推荐
前端程序猿之路6 小时前
Next.js 入门指南 - 从 Vue 角度的理解
前端·vue.js·语言模型·ai编程·入门·next.js·deepseek
D_C_tyu6 小时前
Vue3 + Element Plus | el-table 表格获取排序后的数据
javascript·vue.js·elementui
JIngJaneIL6 小时前
基于java+ vue农产投入线上管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
hellotutu7 小时前
vue2 从 sessionStorage 手动取 token 后,手动加入到 header
vue.js·token·session·header
一 乐9 小时前
酒店预约|基于springboot + vue酒店预约系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
前端无涯10 小时前
React/Vue 代理配置全攻略:Vite 与 Webpack 实战指南
vue.js·react.js
JIngJaneIL11 小时前
基于java+ vue交友系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·交友
苹果酱056711 小时前
解决linux mysql命令 bash: mysql: command not found 的方法
java·vue.js·spring boot·mysql·课程设计
拉不动的猪11 小时前
回顾计算属性的缓存与监听的触发返回结果
前端·javascript·vue.js
小七不懂前端12 小时前
我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了一个企业级 sass 多租户平台
前端·vue.js·后端