Vue+ElementUI がサイズの大きいフォームを処理する方法

この記事では、Vue ElementUI が非常に大きなフォームを処理する方法について説明します。お役に立てば幸いです。

社内の最近の業務調整により、以前の長文のロジックが大幅に変更されたため、再構築する予定です（バックグラウンドマネージャーによって作成されました）誰が辞任しました。 コメントはありません。1 つのコンポーネントに 4000 行が書かれていますが、これは本当に無力です)。便宜上、プロジェクトを 14 コンポーネント に分割し、簡略化しました。

全体的な考え方

• 大きなフォームはビジネス モジュールに応じて分割されます
• 保存時に el-form が提供する validate# を使用します##検証方法 (各分割コンポーネントを検証するループ)
各コンポーネントの公開抽出をミックスイン (後のプロジェクトのメンテナンスにも役立ちます)

[関連する推奨事項: 「

vue.js チュートリアル 」]

開始

ここでは
• を使用して 2 つのコンポーネントを分割します例: form1、form2 (読者の便宜のため、名前は使用しないでください)
ここで
• ref と model という 2 つのコンポーネントが結び付けられているのはなぜですか?決定されたものはすべて 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)
        }
    }
}

2 つのコンポーネント

ref と model がバインドされている理由を答えてください。 form

比較すると、
• form1 form2 には共通の props メソッドがあることがわかります。
これを次の方法で抽出します。 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 中国語 Web サイトの他の関連記事を参照してください。