Wie Vue+ElementUI mit übergroßen Formularen umgeht

Dieser Artikel zeigt Ihnen, wie Sie sehr große Formulare mit Vue + ElementUI verarbeiten. Ich hoffe, er wird Ihnen helfen!

Aufgrund der jüngsten Geschäftsanpassungen im Unternehmen hat sich die Logik der vorherigen Langform stark geändert, daher habe ich vor, sie zu rekonstruieren (sie wurde von einem Hintergrundmanager geschrieben, der zurückgetreten ist, und es gibt keine Kommentare. Eine Komponente hat 4000 + geschrieben (OK, ich bin wirklich machtlos). Der Einfachheit halber habe ich das Projekt in 14 Komponenten aufgeteilt und vereinfacht. 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

  Gesamtidee

Große Formulare werden nach Geschäftsmodulen aufgeteilt

Verwenden Sie beim Speichern den von el-form bereitgestellten validateMethode zur Verifizierung (Loop-Verifizierung jeder geteilten Komponente)
• mixin öffentliche Extraktion jeder Komponente (auch förderlich für die Wartung späterer Projekte)
• [Verwandte Empfehlungen: 《vue.js-Tutorial
》】

Starten

hier Nehmen Sie splitting 2 Komponenten als Beispiel: form1, form2 (aus Gründen der Lesbarkeit bitte keine Namen verwenden)

🎜Warum sind die beiden Komponenten hierref und model sind an form gebunden, was später erläutert wird (zur Vereinfachung der späteren Wartung)🎜🎜rrreee🎜🎜Sehen Sie sich an, wie auf die übergeordnete Komponente verwiesen wird🎜🎜rrreee🎜🎜 Weil die Attributnamen form1 und form2 in formData jeweils für die ref der Unterformularkomponente verwendet werden, also sie kann durchlaufen werden. Finden Sie sie nacheinander und ändern Sie die Speicherfunktion. Der Code lautet wie folgt: 🎜🎜rrreee

Antworten Sie, warum die beiden Komponenten ref und model sind gebunden an form🎜🎜🎜Durch Vergleich können wir feststellen, dass form1 form2 die gleichen props-Methoden hat🎜🎜Wir extrahieren es durch Mixin🎜🎜 rrreee🎜🎜in Referenzieren Sie den <code>minix in form1 form2 und löschen Sie die entsprechenden Attribute und Methoden in der entsprechenden Komponente🎜🎜🎜Ende🎜🎜🎜Es ist sehr mühsam, es extrem zu lösen Große Formen, hier geht es nur um die Aufteilung der Komponenten🎜🎜Die Verknüpfung zwischen Komponenten ist ebenfalls eine große Schwierigkeit. Ich werde es beim nächsten Mal veröffentlichen, nachdem ich es fertiggestellt habe. Sie können gerne im Kommentarbereich diskutieren, wie Sie es gelöst haben Gerne kann ich den Autor auch auf die Mängel hinweisen🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie Vue+ElementUI mit übergroßen Formularen umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!