最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定です(退職したバックエンドスタッフが以前書いたもので、コメントはありません。1つのコンポーネントが4,000行以上あり、本当にやる気がありません)。便宜上、プロジェクトを 14 個のコンポーネントに分割して簡素化しました。 全体的なアイデア
始めるここでは、2つのコンポーネントの分割を例に挙げます: form1、form2 (読者の便宜のため、命名を批判しないでください) ここで 2 つのコンポーネントがフォーム、ref、model にバインドされている理由は、後で説明します (後のメンテナンスの便宜のため) // フォーム1 コンポーネント <テンプレート> <el-フォーム ref="フォーム" :model="フォーム" ラベル幅="10px" > <el-form-item label="名前" prop="名前"> <el-input v-model="フォーム名" /> </el-form-item> </el-form> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'Form1'、 小道具: { 形状: {} }, データ() { 戻る { ルール: 名前: [ { 必須: true、メッセージ: '名前を入力してください'、トリガー: 'blur' } ] } } }, メソッド: { // ここで親コンポーネントをループして検証validForm()を呼び出します。{ 結果 = false とする this.$refs.form.validate(有効 => 有効 && (結果 = true)) 結果を返す } // ここでは別の方法で書きましたが、ループしてチェックするときには Promise オブジェクトになります。問題があります。大物たちが私にアドバイスをくれることを願っています。validForm() { // ここでの出力構造は明らかにブール値ですが、親コンポーネントのループ呼び出し後はプロミス型なので、変換する必要があります。 return this.$refs.form.validate().catch(e => console.log(e)) } } } </スクリプト> // form2 コンポーネント <テンプレート> <el-フォーム ref="フォーム" :model="フォーム" ラベル幅="10px" > <el-form-item label="年齢" prop="年齢"> <el-input v-model="form.age" /> </el-form-item> </el-form> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'Form2'、 小道具: { 形状: {} }, データ() { 戻る { ルール: 名前: [ { 必須: true、メッセージ: '年齢を入力してください'、トリガー: 'blur' } ] } } }, メソッド: { // ここで親コンポーネントをループして検証validForm()を呼び出します。{ 結果 = false とする this.$refs.form.validate(有効 => 有効 && (結果 = true)) 結果を返す } } } </スクリプト> 親コンポーネントがどのように参照されているかを確認する // 親コンポーネント <テンプレート> <div class="parent"> <form1 ref="form1" :form="formData.form1" /> <form2 ref="form2" :form="formData.form2" /> <el-button type="primary" @click="save">エラー</el-button> </div> </テンプレート> <スクリプト> ...参照を省略すると、export default { 名前: '親'、 ... 登録データを省略する() { 戻る { フォームデータ: { フォーム1: {}, フォーム2: {} } } }, } </スクリプト> formData の属性名 form1 と form2 はそれぞれサブフォーム コンポーネントの ref で使用されるため、トラバーサル中に順番に見つけることができ、保存関数を変更できます。コードは次のとおりです。 メソッド: { 保存 () { //各フォーム オブジェクトのキー値、つまり各フォームの参照値 const formKeys = Object.keys(this.formData) // 各フォームの検証メソッドを実行します const valids = formKeys.map(item => this.$refs[item].validForm()) // すべてのフォームが検証に合格した後のロジック if (valids.every(item => item)) { コンソール.log(11) } } } ref コンポーネントと model コンポーネントの両方が form にバインドされるのはなぜですか?
エクスポートデフォルト{ 小道具: { 形状: { 必須: true、 タイプ: オブジェクト、 デフォルト: () => {} }, }, メソッド: { 有効なフォーム(){ 結果 = false とする this.$refs.form.validate(有効 => 有効 && (結果 = true)) 結果を返す } } } form1 form2 内の minix を参照し、対応するコンポーネント内の対応するプロパティとメソッドを削除します。 結論
Vue+ElementUI が超大型フォームをどのように処理するかについての記事はこれで終わりです。Vue+ElementUI が超大型フォームをどのように処理するかについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例
>>: Nginx+ModSecurity セキュリティモジュールの導入
目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...
セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...
優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...
序文トップメニューを作成する場合、ポップアップのセカンダリメニューを作成する必要があります。 以前の...
1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...
目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...
目次1. 制約の概念と分類2. 5つの制約の追加と削除2.1 制約を追加する6つの方法2.2 制約を...
この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...
tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...
目次非同期とは何ですか?なぜ非同期性が必要なのでしょうか?非同期IOとは何ですか?イベントループとは...
目次序文1. batがjsを実行する2. ターミナルにバージョン番号を入力してパッケージ化コマンドを...
エラーシナリオcmd の mysql コマンドを使用して、学生情報テーブルにデータを追加します。デー...
ステップ1: ディレクトリに入ります: cd /etc/mysql、debian.cnfファイルを表...
目次序文yumソース、epelソースを設定するCephソースの設定Cephとそのコンポーネントをイン...
目次導入js のイテレータはどのように見えるか反復プロトコル反復可能なプロトコルイテレータプロトコル...