当前位置:   article > 正文

VUE2用elementUI实现父组件中校验子组件中的表单_vue 详细子表 的校验

vue 详细子表 的校验

需求是VUE2框架用elementUI写复杂表单组件,比如,3个相同功能的表单共用一个提交按钮,把相同功能的表单写成一个子组件,另一个父组件包含子组件的重复调用和一个提交按钮,并且要求提交时校验必填项。

注意:

1.validate函数不传参数就会返回一个promise

2.子组件中写了this.$refs.form?.map...是因为真实项目中el-form是进行了循环的,这里可以自定义修改

3.父组件中要用promise来处理调用子组件的方法

子组件:

  1. <template>
  2. <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
  3. <el-form-item label="姓名" prop="name">
  4. <el-input v-model="formData.name"></el-input>
  5. </el-form-item>
  6. <el-form-item label="邮箱" prop="email">
  7. <el-input v-model="formData.email"></el-input>
  8. </el-form-item>
  9. <!-- 其他表单项 -->
  10. </el-form>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. formData: {
  17. name: '',
  18. email: ''
  19. // 其他表单项
  20. },
  21. formRules: {
  22. name: [
  23. { required: true, message: '请输入姓名', trigger: 'blur' }
  24. ],
  25. email: [
  26. { required: true, message: '请输入邮箱', trigger: 'blur' }
  27. ]
  28. // 其他表单项的校验规则
  29. }
  30. };
  31. },
  32. methods: {
  33. validateForm() {
  34. const validatePromises = this.$refs.form?.map(v => {
  35. return v.validate();
  36. });
  37. if (validatePromises) {
  38. return Promise.all(validatePromises)
  39. .then(results => {
  40. // 检查结果数组,如果所有项都是 true,则返回 true,否则返回 false
  41. return results.every(result => result);
  42. })
  43. .catch(() => {
  44. // 如果有任何验证 Promise 失败,则捕获错误
  45. return false;
  46. });
  47. } else {
  48. // 如果 this.$refs.form 不存在,直接返回 false 或抛出错误
  49. return false;
  50. }
  51. }
  52. }
  53. };
  54. </script>

 父组件

  1. <template>
  2. <div>
  3. <FormComponent v-for="(ref,index) in formRefs" :key="index" :ref="ref">
  4. </FormComponent>
  5. <el-button type="primary" @click="submitForms">提交</el-button>
  6. </div>
  7. </template>
  8. <script>
  9. import FormComponent from './FormComponent.vue';
  10. export default {
  11. data() {
  12. return {
  13. formRefs: []
  14. };
  15. },
  16. components: {
  17. FormComponent
  18. },
  19. mounted() {
  20. // 根据需要调用表单的次数,此处假设为10次
  21. for (let i = 0; i < 10; i++) {
  22. this.formRefs.push(`form${i + 1}`);
  23. }
  24. },
  25. methods: {
  26. async onSubmit() {
  27. // 1、pc端:一次性校验所有题
  28. Promise.all(
  29. this.formRefs?.map(v => {
  30. return this.$refs?.[v]?.[0]?.validateForm();
  31. })
  32. )
  33. .then(res => {
  34. if (res?.every(v => v)) {
  35. const formDataList = this.formRefs?.map(v => {
  36. return this.$refs?.[v]?.[0]?.form;
  37. });
  38. // 2、提交问卷
  39. console.log('formDataList', formDataList);
  40. } else {
  41. // 找出所有校验不通过的表单
  42. const falseFormList = res.filter(v => !v);
  43. // TODO 自定义操作
  44. }
  45. })
  46. .catch(() => {
  47. this.$alert('请稍后重试', '提示', {
  48. dangerouslyUseHTMLString: true
  49. });
  50. });
  51. }
  52. }
  53. };
  54. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/827194
推荐阅读
相关标签
  

闽ICP备14008679号