• 技术文章 >web前端 >Vue.js

    Vue+ElementUI怎么处理超大表单

    青灯夜游青灯夜游2021-11-22 19:49:49转载88
    本篇文章带大家了解一下Vue + ElementUI进行超大表单处理的方法,希望对大家有所帮助!

    最近公司由于业务的调整,之前的超长表单的逻辑改动较多,所以我就打算重构了(之前是一个已离职的后台写的,也没有注释,一个组件写了4000+行,实在有心无力)。为了各位方便阅读,我这里把项目里拆分了14个组件进行了精简。

    整体思路

    【相关推荐:《vue.js教程》】

    开始

    // form1 组件
    <template>
        <el-form
          ref="form"
          :model="form"
          label-width="10px"
        >
          <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" />
          </el-form-item>
        </el-form>
    </template>
    <script>
    export default {
      name: 'Form1',
        props: {
          form: {}
      },
      data() {
        return {
          rules: {
            name: [
              { required: true, message: '请输入姓名', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        // 这里是是为了父组件循环调用校验
        validForm() {
            let result = false
            this.$refs.form.validate(valid => valid && (result = true))
            return result
        }
        // 我这里还用了另一种方式写的,但是循环校验的时候是promise对象,有问题,望大佬们指点一二
        validForm() {
            // 明明这里输出的结构是 Boolean 值,但在父组件循环调用之后就是promise类型,需要转换一下才行
            return this.$refs.form.validate().catch(e => console.log(e))
        }
      }
    }
    </script>
    
    // form2 组件
    <template>
        <el-form
          ref="form"
          :model="form"
          label-width="10px"
        >
          <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" />
          </el-form-item>
        </el-form>
    </template>
    <script>
    export default {
      name: 'Form2',
      props: {
          form: {}
      },
      data() {
        return {
          rules: {
            name: [
              { required: true, message: '请输入年龄', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        // 这里是是为了父组件循环调用校验
        validForm() {
            let result = false
            this.$refs.form.validate(valid => valid && (result = true))
            return result
        }
      }
    }
    </script>
    // 父组件
    <template>
        <div class="parent">
            <form1 ref="form1" :form="formData.form1" />
            <form2 ref="form2" :form="formData.form2" />
            <el-button type="primary" @click="save">报错</el-button>
        </div>
    </template>
    <script>
    ... 省略引用
    export default {
        name: 'parent',
        ... 省略注册
        data () {
            return {
                formData: {
                    form1: {},
                    form2: {}
                }
            }
        },
    }
    </script>
    methods: {
        save () {
            // 每个表单对象的 key 值,也就是每个表单的 ref 值
            const formKeys = Object.keys(this.formData)
            // 执行每个表单的校验方法
            const valids = formKeys.map(item => this.$refs[item].validForm())
            // 所有表单通过检验之后的逻辑
            if (valids.every(item => item)) {
              console.log(11)
            }
        }
    }

    解答为什么两个组件ref、model绑定的都是form

    export default {
      props: {
        form: {
          required: true,
          type: Object,
          default: () => {}
        },
      },
      methods: {
        validForm () {
          let result = false
          this.$refs.form.validate(valid => valid && (result = true))
          return result
        }
      }
    }

    结尾

    更多编程相关知识,请访问:编程入门!!

    以上就是Vue+ElementUI怎么处理超大表单的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:浅析怎么使用Vue3开发一个Pagination公共组件 下一篇:深入了解vue组件中的三个API:prop、slot和event
    php中文网线上培训班

    相关文章推荐

    • 手把手带你快速入门vuex4!• 浅析Vue中hash路由和history路由的区别• 什么是vitepress?怎么将vuepress升为vitepress?• 总结分享一些关于vue的前端基础面试题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网