关于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>
相关推荐
周全全10 分钟前
MySQL报错解决:The user specified as a definer (‘root‘@‘%‘) does not exist
android·数据库·mysql
- 羊羊不超越 -1 小时前
App渠道来源追踪方案全面分析(iOS/Android/鸿蒙)
android·ios·harmonyos
wk灬丨1 小时前
Android Kotlin Flow 冷流 热流
android·kotlin·flow
千雅爸爸1 小时前
Android MVVM demo(使用DataBinding,LiveData,Fresco,RecyclerView,Room,ViewModel 完成)
android
晨曦_子画2 小时前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
孤客网络科技工作室2 小时前
AJAX 全面教程:从基础到高级
android·ajax·okhttp
Mr Lee_4 小时前
android 配置鼠标右键快捷对apk进行反编译
android
顾北川_野4 小时前
Android CALL关于电话音频和紧急电话设置和获取
android·音视频
&岁月不待人&4 小时前
Kotlin by lazy和lateinit的使用及区别
android·开发语言·kotlin