elementUI表单v-model绑定及校验(动态表单校验)技巧

本文详细介绍了在使用ElementUI时如何在表单中进行条件渲染,强调了使用v-if代替v-show的原因,并展示了动态表单验证的实现,包括选择系统、分类名称、用户选择等字段的验证规则。同时,文章提到了动态添加和删除表单元素的处理,以及在复杂嵌套结构中如何正确设置prop属性以确保校验生效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在elementUi的 form表单中

总而言之:涉及表单条件渲染一律用v-if代替v-show

注意:1:v-mode 和 prop的值一致
2:el-select下拉框的v-mode相当于下拉框的value值 当v-model是个数组时,v-model是value集合的一位数组,不是一个数组对象,若错误的写成了一个数组对象,则会出现勾选重复的情况

在这里插入图片描述
动态表单的校验: 动态:控制变量法

在这里插入图片描述

 <el-form :model="formValue" class="container" label-width="200px" v-loading="loading" ref="standardSetForm">
              <el-form-item prop="name" label="选择系统" :rules="[
                { required: true, message: '请选择系统', trigger: 'blur' }
              ]" v-if="type=='second'">
                <el-select v-model="formValue.name" placeholder="请选择系统" style="margin-right: 20px"
                  @change="selectSystem">
                  <el-option v-for="item in system" :key="item.code" :label="item.name" :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="maxDicId" label="分类名称" :rules="[
              { required: true, message: '请选择分类', trigger: 'blur' }
            ]">
                <el-select v-model="formValue.maxDicId" placeholder="请选择分类" style="margin-right: 20px"
                  @change="selectOption">
                  <el-option v-for="item in classifyOptions" :key="item.id" :label="item.dicValue" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- 员工名称 -->
              <el-form-item label="选择用户" prop="selectedEpm" :rules="[
              { required: true, message: '请选择用户', trigger: 'blur' }
            ]" v-if="type=='first'">
                <div v-if="pageModuleType === 'add'">
                  <el-button type="success" @click="showSelectUser()">选择用户</el-button>

                  <el-row>
                    <el-tag v-for="emp in this.formValue.selectedEpm" closable :key="emp.emplid"
                      @close="deleteEmp(emp)">
                      {{ emp.nameDisplay }}
                    </el-tag>
                  </el-row>
                </div>
                <div v-else>

                  <el-input v-model.trim="formValue.name" :disabled="true"></el-input>
                </div>
              </el-form-item>

              <el-form-item :label="index == 0 ? '处理角色、细类、范围和模版' : ''" v-for="(item, index) in formValue.moudleList">
                <!-- <div> -->
                <el-card style="width: 1800px; margin-bottom: 20px">
                  <div slot="header" style="
                                  display: flex;
                                  justify-content: space-between;
                                  align-items: center;
                                ">
                    <div class="left">

                      <el-form-item :prop="'moudleList.' + index + '.priority'" label="处理角色" style="margin-left: -120px"
                        :rules="[
                            { required: true, message: '请选择处理角色', trigger: 'blur' }
                          ]">
                        <el-select v-model="item.priority" placeholder="请选择处理角色">
                          <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="right">
                      <el-button type="primary" plain @click="addModule(0,item)">新增同角色配置</el-button>
                    </div>
                  </div>
                  <el-form-item :prop="'moudleList.' + index + '.deptList'" label="处理范围" :rules="[
                    { required: true, message: '请选择处理范围', trigger: 'blur' }
                  ]" style="margin-left: -90px;margin-bottom:20px">
                    <div>
                      <el-button @click="addOrg(index)">点击添加</el-button>
                    </div>
                    <div v-show="item.deptList">
                      <div @click="addOrg" class="userBox">
                        <el-tag v-for="(tag, ind) in item.deptList" @close="closeOrgTag(tag, index,ind)"
                          :key="tag.deptId" closable>
                          {{ tag.name}}
                        </el-tag>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item :prop="'moudleList.' + index + '.dicId'" label="细类"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                        { required: true, message: '请选择细类', trigger: 'blur' }
                      ]">
                    <el-cascader ref="demoCascader" class="classifyList" v-model="item.dicId"
                      :options="classifyOptionsChild" :props="{
                      multiple: true,
                      checkStrictly: true,
                      children: 'childrens',
                      label: 'dicValue',
                      value: 'id'
                    }" @change="classifyChange($event,index)"></el-cascader>
                  </el-form-item>
                  <el-form-item :prop="'moudleList.' + index + '.newMultipleSelection'" label="请选择新建模板"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                        { required: true, message: '请选择新建模板', trigger: 'blur' }
                      ]">
                    <el-select v-model="item.newMultipleSelection" multiple placeholder="请选择新建模板"
                      @focus="selectTemp(item.dicId,index,0)">
                      <el-option v-for="ele in item.newMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
                        <span style="float: left">{{ ele.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item :prop="'moudleList.' + index + '.turnMultipleSelection'" label="请选择转单模板"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                          { required: true, message: '请选择转单模板', trigger: 'blur' }
                        ]">
                    <el-select v-model="item.turnMultipleSelection" multiple placeholder="请选择转单模板"
                      @focus="selectTemp(item.dicId,index,1)">
                      <el-option v-for="ele in item.turnMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
                        <span style="float: left">{{ ele.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :prop="'moudleList.' + index + '.handleMultipleSelection'" label="请选择处理模板"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                       { required: true, message: '请选择处理模板', trigger: 'blur' }
                     ]">
                    <el-select v-model="item.handleMultipleSelection" multiple placeholder="请选择处理模板"
                      @focus="selectTemp(item.dicId,index,2)">
                      <el-option v-for="ele in item.handleMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
                        <span style="float: left">{{ ele.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <div v-if="formValue.moudleList.length>1" style="float:right;margin-bottom:30px">
                    <el-button type="primary" plain @click="delModule(index)">删除</el-button>
                  </div>
                </el-card>

                <div v-if="index == formValue.moudleList.length - 1">
                  <el-button type="primary" plain @click="addModule(1)">新增角色配置</el-button>
                </div>
              </el-form-item>

              <!-- 提交 -->
              <el-form-item label="">
                <el-row>
                  <el-col style="padding-bottom: 30px">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="
                    () => {
                      $router.back(-1)
                    }
                  ">返回
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>

注意:
在这里插入图片描述
1:当validate、resetFields 的方法时,props属性是必填的,props与data中需要定义的model的键名一致,
2:data中需要定义model绑定的对应字段 否则validate、resetFields方法不会生效
3.不论el-form-item的组件是何种类型,只要满足1,2均可校验,不局限于el-elemntui的el-form常用那几种,如(自定义组织架构树也可以进行校验)

form: {
            isArea: '0',
            isGrade: '1',
            period: '',
            // eliminateHoliday: 0,
            overLimit: '',
            overUnit: '',
            moudleArea: [{
              areaDeptIds: [],
              period: '',
              overLimit: '',
              eliminateHoliday: 0,
              timeRangeList: [{
                time: '',
              }],
              overtimeHandlerList: [{
                overLimit: '',
              }]
            }],
          },

3:特别要注意 . 的添加位置 ,至于为什么要这样写呢 (其实就是获取对象属性的方式===>通过.或者索引去获取)通过打印校验我们会发现以下得到的是类似这样的数据
moudleArea.0.overtimeHandlerList.0.overLimit
如果index和属性之间不加.去获取 则得到的是moudleArea.0overtimeHandlerList.0.overLimit这样 这样明显是错误的获取不到我们想要的属性

很简单的却也是很容易忽略的地方

:prop="'moudleArea.' + index + '.overtimeHandlerList.'+ ind+ '.overLimit'"

4:当校验的内容中有条件渲染的时候,请将v-show换成‘v-if’,否则会导致v-show隐藏的部分不需要校验,但是页面提交时校验结果一直为false

动态校验规则写法
写法一

  在标签处写rule校验逻辑
  <el-form-item
                label=""
                :prop="'multiConditions.' + index + '.conditions.' + ind + '.value'"
                v-if="ele.field == 'FINAL_SCORE'"
                :rules="[{ validator: validateFinalScore, trigger: 'change' }]"
              >
                <el-input-number
                  v-model="ele.value"
                  placeholder="支持填写数字"
                  style="width: 180px"
                />
              </el-form-item>

写法二
在数据层定义规则

   <el-form-item
                :prop="'baseConditionList.' + index + '.compareToTargetValueStep'"
                :rules="dataRules.compareToTargetValueStep"
              >
                <el-input
                  v-model="item.compareToTargetValueStep"
                  controls-position="right"
                  style="width: 70px"
                />
              </el-form-item>
   const dataRules = reactive<ElRules>({
    scoreLimit: [{ validator: validateValue, trigger: 'change' }],
    compareToTargetValueStep: [{ validator: validateValue, trigger: 'change' }],
    score: [{ validator: validateValue, trigger: 'change' }],
    stepScore: [{ validator: validateValue, trigger: 'change' }],
    scoreUpperLimit: [{ validator: validateValue, trigger: 'change' }],
    scoreLowerLimit: [{ validator: validateValue, trigger: 'change' }],
  })

前提:

在这里插入图片描述

在Element UI中,表单校验规则通常是在初始化时静态设置的。但如果需要根据某些条件动态修改校验规则(dynamic rules),可以通过重新赋值`rules`属性来实现。 下面是一个详细的示例,展示如何动态调整表单校验规则。 --- ### 动态Rules 示例 #### 场景描述 假设我们有一个表单,包含两个输入框:“用户名”和“密码”。当用户选择了某个选项(如“高级模式”)时,“密码”的长度要求会从6位增加到8位。 #### 实现步骤 1. **创建初始的 Rules** 定义默认的校验规则,并将其绑定表单组件上。 2. **更新 Rules** 根据用户的操作(例如点击按钮或切换开关),更改`rules`的内容。 3. **触发校验** 更改完`rules`后,重新调用校验方法以应用新的规则。 --- #### 具体代码实现 ##### HTML 部分 ```html <el-form ref="myForm" :model="formData" :rules="formRules" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="formData.password"></el-input> </el-form-item> <el-checkbox v-model="isAdvancedMode">启用高级模式</el-checkbox> <!-- 触发动态变化 --> <el-button type="primary" @click="handleSubmit">提交</el-button> </el-form> ``` ##### JavaScript 部分 ```javascript export default { data() { return { formData: { username: "", password: "" }, formRules: {}, // 初始为空 isAdvancedMode: false // 是否启用高级模式,默认关闭 }; }, watch: { isAdvancedMode(newValue) { this.updateDynamicRules(); // 监听复选框状态改变,动态生成校验规则 } }, mounted() { this.updateDynamicRules(); // 初始化加载一次规则 }, methods: { updateDynamicRules() { let baseRules = { username: [ { required: true, message: "请输入用户名", trigger: "blur" }, { min: 3, max: 20, message: "长度应在 3 到 20 个字符之间", trigger: "blur" } ], password: [{ required: true, message: "请输入密码", trigger: "blur" }] }; if (this.isAdvancedMode) { // 启用了高级模式,则添加额外的密码规则 baseRules.password.push({ min: 8, message: "密码长度不得小于 8", trigger: "blur" }); } this.formRules = baseRules; // 更新规则 }, handleSubmit() { this.$refs.myForm.validate(valid => { if (valid) { alert("表单验证通过!"); } else { console.log("表单验证未通过"); } }); } } }; ``` --- ### 关键点解析 1. **动态更新 Rule** - 使用`watch`监控特定变量的变化。 - 当该变量发生变化时,重构整个`rules`对象并重新赋值给`formRules`。 2. **实时生效机制** Element UI 的 `<el-form>` 组件会对`rules`属性进行响应式检测,因此只要改变了`rules`内容,新规则就会立即生效。 3. **注意性能优化** 尽量避免频繁更改`rules`结构,因为这可能会导致不必要的渲染开销。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值