Element UI循环表单中自定义级联组件验证异常求助

问题根源分析 #

1. 数据类型不匹配：父组件中form.involveUsers[].mechanismName初始值为字符串''，但自定义InstitutionSelection组件通过$emit传递的是数组/对象类型，导致Element表单验证逻辑混乱：
   • 默认必填规则判断空字符串为未填写，即使后续赋值数组仍触发必填提示；
   • 自定义验证器接收的value类型频繁切换（字符串→数组→数组），引发is not a string报错。
2. 组件内部值同步缺失：自定义组件未监听父组件传入的value来更新内部selected值，导致初始状态下组件内部值与父组件数据不一致，验证时机与数据更新不同步。

具体修复步骤 #

1. 统一父组件初始数据类型 #

将form.involveUsers[].mechanismName的初始值改为与自定义组件输出一致的类型（组件emit的是数组，所以初始值设为空数组）：

data() {
  return {
    form: {
      involveUsers: [
        { mechanismName: [] } // 替换原有的''
      ]
    },
    rules: {
      mechanismName: [ 
        { 
          required: true, 
          type: 'array', // 指定类型为数组
          min: 1, // 数组长度至少为1
          message: '请选择机构' 
        } 
      ]
    }
  }
}

2. 修正自定义组件的双向绑定逻辑 #

在InstitutionSelection组件中添加对value的监听，确保内部selected值与父组件同步：

<template>
  <el-cascader v-model="selected" :options="mechanism" :props="{ value: 'id', label: 'name' }"/>
</template>

<script>
export default {
  props: { 
    value: {
      type: Array,
      default: () => [] // 用工厂函数返回空数组，避免引用共享
    }
  },
  model: { prop: 'value', event: 'setValue' },
  data() {
    return {
      mechanism: [], // 级联树形数据
      mechanismService: [], // 服务器返回的原始扁平数据
      selected: [...this.value] // 初始值同步父组件传入的value
    }
  },
  watch: {
    // 监听父组件传入的value，更新内部selected
    value(newVal) {
      this.selected = [...newVal]
    },
    selected(newValue) {
      // 保留业务逻辑：取最后一级ID，匹配完整数据
      const target = this.mechanismService.find(item => item.id === newValue[newValue.length - 1])
      // 确保emit的是数组类型，和初始值类型一致
      this.$emit('setValue', target ? [target] : [])
    }
  }
}
</script>

3. 调整自定义验证器（如果仍需使用） #

若不用默认规则改用自定义验证器，需针对数组类型做判断：

data() {
  const mechanismNameValidator = (rule, value, callback) => {
    // 判断数组是否有有效数据
    if (!Array.isArray(value) || value.length === 0 || !value[0]?.id) {
      callback(new Error('请选择机构'))
    } else {
      callback()
    }
  }

  return {
    rules: {
      mechanismName: [ { validator: mechanismNameValidator } ]
    }
  }
}

4. 确保表单验证触发 #

若验证仍不及时，可在自定义组件emit后手动触发对应字段的验证：

// 在父组件中给InstitutionSelection添加事件监听
<InstitutionSelection 
  v-model="item.mechanismName" 
  @setValue="handleMechanismSelect(index)"
/>

// 父组件方法
methods: {
  handleMechanismSelect(index) {
    // 手动触发对应字段的验证
    this.$refs.form.validateField(`involveUsers.${index}.mechanismName`)
  }
}

内容的提问来源于stack exchange，提问作者Felix