vue 一个el-form-item 绑定多个 input 或者select 校验

最新推荐文章于 2024-03-07 16:07:12 发布

前端小蔡姬

最新推荐文章于 2024-03-07 16:07:12 发布

阅读量3.1k

点赞数 1

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/x_nweBorder01k/article/details/126389419

版权

<el-form-item label="触发规则：" prop="ruler" v-if="decustom">
          <div v-for="(i,index) in contentForm.ruler" :key="index" class="umar-b20 error_edit">
            <div class="flex flex_between">
              <div class="flex">
                <span>事件类型<span class="umar-lr20">等于</span></span>
                <el-form-item :prop="'ruler.'+index+'.ruleType'" :rules="rules.ruleType">
                  <el-select v-model="i.ruleType" placeholder="请选择">
                    <el-option v-for="item in rules1Options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <span class="umar-l20 umar-b20">且</span>
              </div>
              <div class="umar-r20 umar-b20 fz-20 c-p" style="color: #409eff">
                <span @click="addRules"> + </span>
                <span class="umar-lr20" @click="deleteRules(index,contentForm.ruler)" v-if="contentForm.ruler.length>1"> - </span>
              </div>
            </div>
            <div class="flex">
              <el-form-item :prop="'ruler.'+index+'.ruleMoney'" :rules="rules.ruleMoney">
                <el-select v-model="i.ruleMoney" placeholder="请选择">
                  <el-option v-for="item in rules2Options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :prop="'ruler.'+index+'.judge'" :rules="rules.judge">
                <el-select v-model="i.judge" placeholder="请选择" class="umar-lr20">
                  <el-option v-for="item in judgeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :prop="'ruler.'+index+'.money'" :rules="rules.money">
                <el-input v-model="i.money" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form-item>

:prop="'ruler.'+index+'.ruleType'" :rules="rules.ruleType"

:prop 里面ruler是和循环的绑定数组对应，ruleType是下拉框或者输入框绑定的model值

:rules 里面的rules 是整体form表单的rules值，ruleType是定义的校验，写在data里面的rules里面

rules: {
        ruleType:[
          { required: true, message: '请选择', trigger: 'change' }
        ],
        ruleMoney:[
          { required: true, message: '请选择', trigger: 'change' }
        ],
        judge:[
          { required: true, message: '请选择', trigger: 'change' }
        ],
        money:[
          { required: true, message: '请输入', trigger: 'blur' }
        ],
      }