1、elementUI组件表单动态验证失效的问题描述
描述:在一次项目需求中,当select下拉选项为某一个值的时候,表单某一项才校验,否则不校验
如下,当活动区域选择区域一时,即时配送需要校验,否则则不校验该项。
- 需要校验的截图
- 不需要校验的截图
2、解决办法(以下方法都试过,都好使)
- 1、方法一:通过看vue官方文档,看到key的介绍,就尝试设置唯一的key值,结果发现好使
官方文档key值介绍:
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
完整代码展示
<template> <div class="demo-form"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-row> <el-col :span="16"> <el-form-item label="活动区域" prop="region"> <el-select style="width:100%;" v-model="ruleForm.region" placeholder="请选择活动区域" @change="selectRegion" > <el-option label="区域一" value="1"></el-option> <el-option label="区域二" value="2"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item v-if="isDelivery" label="即时配送" prop="delivery" key="1" > <el-input v-model="ruleForm.delivery"></el-input> </el-form-item> <el-form-item v-else label="即时配送" key="2"> <el-input v-model="ruleForm.delivery"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即创建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { region: '', delivery: '' }, rules: { region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], delivery: [ { required: true, message: '请选择即时配送', trigger: ['change', 'blur'] } ] }, isDelivery: false } }, methods: { selectRegion(val) { this.isDelivery = +val === 1 }, submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { console.log('submit!') } else { console.log('error submit!!') return false } }) }, resetForm(formName) { this.$refs[formName].resetFields() } } } </script>
- 方法二:通过判断给rules动态设置值
完整代码
<template> <div class="demo-form"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-row> <el-col :span="16"> <el-form-item label="活动区域" prop="region"> <el-select style="width:100%;" v-model="ruleForm.region" placeholder="请选择活动区域" @change="selectRegion" > <el-option label="区域一" value="1"></el-option> <el-option label="区域二" value="2"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item label="即时配送" prop="delivery" :rules=" isDelivery ? { required: true, message: '请选择即时配送', trigger: ['change', 'blur'] } : {} " > <el-input v-model="ruleForm.delivery"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即创建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { region: '', delivery: '' }, rules: { region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ] }, isDelivery: false } }, methods: { selectRegion(val) { this.isDelivery = +val === 1 }, submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { console.log('submit!') } else { console.log('error submit!!') return false } }) }, resetForm(formName) { this.$refs[formName].resetFields() } } } </script>
共有 0 条评论