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

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

重点提示:这里要明确一个概念,凡是在组件内插槽的内容都属于组件管理,因此,要校验父组件使用子组件的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>
相关推荐
长亭外的少年7 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
建群新人小猿10 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
1024小神11 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
兰琛11 小时前
20241121 android中树结构列表(使用recyclerView实现)
android·gitee
Y多了个想法12 小时前
RK3568 android11 适配敦泰触摸屏 FocalTech-ft5526
android·rk3568·触摸屏·tp·敦泰·focaltech·ft5526
NotesChapter13 小时前
Android吸顶效果,并有着ViewPager左右切换
android
_祝你今天愉快14 小时前
分析android :The binary version of its metadata is 1.8.0, expected version is 1.5.
android
暮志未晚Webgl14 小时前
109. UE5 GAS RPG 实现检查点的存档功能
android·java·ue5
麦田里的守望者江15 小时前
KMP 中的 expect 和 actual 声明
android·ios·kotlin
Dnelic-15 小时前
解决 Android 单元测试 No tests found for given includes:
android·junit·单元测试·问题记录·自学笔记