Sunny极致Web

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>