关于vue elementUi校验slot插槽中的表单项

浪里小韭菜2024-06-23 6:03

项目场景：在父组件表单中使用子组件，并使用子组件插槽功能来管理父组件的单个表单项

重点提示：这里要明确一个概念，凡是在组件内插槽的内容都属于组件管理，因此，要校验父组件使用子组件的slot插槽展示表单项，那么这个表单项的校验规则要放在子组件的表单数据中进行管理和校验

解决方案

这里涉及到作用域具名插槽功能，用来将子组件的表单数据传递给父组件

c 复制代码

// 子组件
// 表单管理，比如父组件的slot表单项字段是customField，数据源分传递和子组件定义，自行选择

<el-form ref="formRef" :model="formData" :rules="rules">
  <!-- 其他表单项... -->
  <el-form-item prop="customField">
    <!-- 作用域具名插槽，name可以自定义，与父组件一致即可 -->
    <slot name="customField" :formData="formData"></slot>
  </el-form-item>
  <!-- 其他表单项... -->
</el-form>

export default {
  props: {
    // 数据源1：使用父组件传递的
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 数据源2：使用子组件自定义的
      formData: {
        customField
      },
      rules: {
        customField: [
          { required: true, message: '此字段为必填项', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 子组件保存提交校验
    validateForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('表单验证通过');
          // 执行后续逻辑
        } else {
          console.log('表单验证失败');
        }
      });
    }
  }
};

javascript 复制代码

// 父组件 

// 数据源1
<child-component :formData="parentFormData">
  <template #customField="{ formData }">
    <el-input v-model="formData.customField"></el-input>
  </template>
</child-component>

// 数据源2
<child-component>
  <template #customField="{ formData }">
    <el-input v-model="formData.customField"></el-input>
  </template>
</child-component>