使用vue3+elementplus+ts给出父子组件完整示例,要求在父组件中循环出子组件,在父组件中点击保存时候循环校验所有子组件的form表单,当有一个校验不通过时停止校验并输入当前校验不通过的组

文章描述了一个使用Vue3、ElementPlus和TypeScript实现的ParentComponent.vue示例,展示了如何动态创建子组件ChildComponent.vue,并在父组件中对所有子组件的表单进行验证,确保字段填写完整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent
      v-for="(child, index) in childComponents"
      :key="index"
      v-model="child.form"
      :name="`子组件 ${index + 1}`"
    />

    <el-button @click="save">保存</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  data() {
    return {
      childComponents: [{ form: {} }, { form: {} }],
    };
  },
  methods: {
    async save() {
      for (let i = 0; i < this.childComponents.length; i++) {
        const childForm = this.childComponents[i];

        // 调用子组件的表单校验方法
        const valid = await this.validateChildForm(childForm);

        if (!valid) {
          // 表单校验失败
          this.$message.error(`请正确填写 ${this.getChildComponentName(i)} 的表单信息`);
          break; // 停止继续校验
        }
      }
    },
    async validateChildForm(childForm: any) {
      return new Promise<boolean>((resolve) => {
        if (childForm.validate) {
          childForm.validate((valid: boolean) => {
            resolve(valid);
          });
        } else {
          resolve(true); // 如果子组件没有 validate 方法,直接通过
        }
      });
    },
    getChildComponentName(index: number) {
      // 根据实际情况获取子组件的名称
      return `子组件 ${index + 1}`;
    },
  },
});
</script>

<!-- ChildComponent.vue -->
<template>
  <el-form ref="form" :model="form" :rules="formRules">
    <el-form-item label="字段名" prop="fieldName">
      <el-input v-model="form.fieldName"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    modelValue: Object,
    name: String,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const form = ref(props.modelValue);

    const formRules = {
      fieldName: [{ required: true, message: '请输入字段名', trigger: 'blur' }],
      // ...
    };

    const validate = (callback: (valid: boolean) => void) => {
      if (form.value.$refs.form) {
        form.value.$refs.form.validate(callback);
      } else {
        callback(true); // 如果子组件没有 form,直接通过
      }
    };

    emit('update:modelValue', form.value);

    return {
      form,
      formRules,
      validate,
    };
  },
});
</script>

在这个示例中,ParentComponent.vue 使用 v-for 动态创建子组件,每个子组件(ChildComponent.vue)包含一个带有必填字段的简单表单。父组件中的 save 方法遍历所有子组件,使用 validateChildForm 方法验证它们的表单,并在任何表单无效时停止验证。

这个示例使用了Vue 3、Element Plus和TypeScript。请确保你的项目中已经安装了必要的TypeScript和Vue 3依赖。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值