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

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

青灯夜游

リリース： 2021-11-22 19:49:49

転載

2364 人が閲覧しました

この記事では、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 メソッドがあることがわかります。

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

ログイン後にコピー