Vue+ElementUI怎麼處理超大表單

這篇文章帶大家了解Vue ElementUI進行超大表單處理的方法，希望對大家有幫助！

最近公司由於業務的調整，之前的超長表單的邏輯改動較多，所以我就打算重構了（之前是一個已離職的後台寫的，也沒有註釋，一個組件寫了4000 行，實在有心無力）。為了各位方便閱讀，我這裡把專案里拆分了14個元件進行了精簡。

整體思路

• 大表單根據業務模組進行拆分
• #儲存時使用el-form提供的validate方法進行校驗(循環對每一個拆分的組件進行校驗)
• mixin 對每個組件的公共提取(也利於後期項目的維護)

【相關推薦：《vue.js教學》】

開始

##這裡以
• 拆分2個元件為例：form1, form2(方便讀者觀看，命名勿噴)
這裡兩個元件為什麼
• ref、model綁定定的都是form後邊會進行說明（為了方便後期維護）

// 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: &#39;Form1&#39;,
    props: {
      form: {}
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: &#39;请输入姓名&#39;, trigger: &#39;blur&#39; }
        ]
      }
    }
  },
  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: &#39;Form2&#39;,
  props: {
      form: {}
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: &#39;请输入年龄&#39;, trigger: &#39;blur&#39; }
        ]
      }
    }
  },
  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: &#39;parent&#39;,
      ... 省略注册
      data () {
          return {
              formData: {
                  form1: {},
                  form2: {}
              }
          }
      },
  }
  </script>

由於
• formData裡的屬性名稱form1和form2分別用在子表單元件的ref#上，因此可以在遍歷時依序找到他們，修改保存函數，程式碼如下：

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

透過比較我們可以發現
• form1 form2有共同的props methods
我們透過mixin 提取一下
• #

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

在
• form1 form2 中引用該minix，並在對應元件中刪除對應的屬性和方法即可

結尾

超大表單解決起來很麻煩，這裡只是對元件的分割
• 元件之間的連動也是一大難點，等下次整理完再發出來
• 歡迎大家在留言區討論一下自己是怎麼解決的，也歡迎大家對作者指出不足

更多程式相關知識，請造訪：

程式設計入門！ ！

以上是Vue+ElementUI怎麼處理超大表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！