Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

エフェクト表示

まずこれが望ましい効果かどうかを確認してください^_^

図に示すように、ElementUI フォームにはテーブルがネストされています。テーブルの各行では、[保存]、[追加]、[編集]、[削除]、[リセット] などの操作を実行できます。同時に、各行の特定のフィールドを検証できます (フォーム全体ではなく)。この要件は非常に一般的なので、記録されています。

コードリンク

giteeアドレス

キーコード

表形式データ

// データ形式は [オブジェクトネスト配列] である必要があります。[フォーム] はフォームにバインドされ、[リスト] はテーブルフォームにバインドされます: {
  // テーブルデータリスト: [
      { id: 1、名前: 'Xiaoye'、年齢: '12'、電話番号: '123456'、表示: true }、
      { id: 2、名前: 'Xiao Li'、年齢: '23'、電話番号: '123457'、表示: true }、
      { id: 3、名前: '小林'、年齢: '12'、電話番号: '123458'、表示: true }
  ]
},

コンポーネントのネスト

  1. フィールド検証を追加する場合、形式は次のように記述する必要があります: prop="'list.' + scope.$index + '.name'"
    これはelementuiで指定された形式です。レンダリングされた結果はlist.1.nameです。
  2. 各フィールドはフォームのルール属性に動的にバインドされる必要があります
  3. 上記の形式でない場合はエラーが発生します! ! !
 // フォームはテーブルの外側にネストする必要があり、フォームは [rules] [ref] 属性にバインドされる必要があります <el-form :model="form" :rules="rules" ref="form">
   <el-table :data="フォーム.リスト">
       <el-table-column prop="name" label="名前">
           <テンプレートスコープ="スコープ">
              // 各フィールドはフォームの [prop] [rules] 属性に動的にバインドされます <el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name">
                    <el-input size="mini" v-model="scope.row.name" placeholder="入力してください" clearable></el-input>
               </el-form-item>
           </テンプレート>
       </el-table-column>
  </el-table>
</el-form>

検証方法

  1. フォームのフィールド オブジェクトは this.$refs['form'].fields に存在し、フィールド オブジェクトには prop [datas.1.name] 属性と validateField メソッド [datas.1.name が検証に合格できるかどうかを確認する] があります。
  2. ただし、検証に合格できるかどうかを確認するには、validateFieldメソッドを手動で作成する必要があります。
  3. 作成する必要があります。作成しないとエラーが発生します。 ! !
 // フォーム検証メソッド // [form] は検証が必要なフォーム、つまりフォーム内の [ref] にバインドされたフィールドです // [index] は渡す必要のある行数、フィールド [scope.$index] です
検証フィールド(フォーム、インデックス) {
     結果を true にします。
     for (let item of this.$refs[form].fields) {
         if(item.prop.split(".")[1] == インデックス){
             this.$refs[form].validateField(item.prop, err => {
                 if(エラー!="") {
                     結果 = false;
                 }
             });
         }
         if(!結果) break;
     }
     結果を返します。
}

リセット方法

// 検証が必要なフォームフィールドをリセットします // パラメータは検証メソッドと同じです。すべてのフィールドをリセットする場合は、reset(form, index) {
    this.$refs[form].fields.forEach(item => {
        if(item.prop.split(".")[1] == インデックス){
            アイテムをリセットフィールド();
        }
    })
}
// すべてのフィールドをリセットする必要がある場合は、フォーム内のフィールドを直接制御できます // [row] は各行に渡されるデータです resetRow(row) {
    行名 = "";
    行.age = "";
    行.電話番号 = "";
}

完全なコード

オンラインリンクを使用しているため、ネットワークが不安定な場合はページが読み込まれない場合があります。 ご利用の際はローカルリンクに切り替えてください。

 <!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>Vue フォームのネストされたテーブルの行ごとの検証</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- スタイルをインポート -->
    <link rel="スタイルシート" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="外部 nofollow" >
    <!-- コンポーネント ライブラリをインポートします-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<本文>
    <div id="アプリ">
        <!-- ページ コンポーネント -->
        <h2 style="text-align: center; line-height: 23px;color: #909399;">Vue フォームのネストされたテーブルの行ごとの検証</h2>
        <el-form :model="フォーム" :rules="ルール" ref="フォーム" :inline="true"
            スタイル="margin: 23px auto 0px; width: 96%; overflow: hidden;">
            <el-table border :data="form.list">
                <el-table-column align="center" prop="id" label="シリアル番号" width="55">
                </el-table-column>
                <el-table-column align="center" prop="name" label="名前">
                    <テンプレートスコープ="スコープ">
                        <el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name"
                            v-if="スコープ行を表示">
                            <el-input size="mini" v-model="scope.row.name" placeholder="入力してください" clearable>
                            </el-input>
                        </el-form-item>
                        <div v-if="!scope.row.show">{{scope.row.name}}</div>
                    </テンプレート>
                </el-table-column>
                <el-table-column align="center" prop="年齢" label="年齢">
                    <テンプレートスコープ="スコープ">
                        <el-form-item :prop="'list.' + scope.$index + '.age'" :rules="rules.age" v-if="scope.row.show">
                            <el-input size="mini" v-model="scope.row.age" placeholder="入力してください" clearable>
                            </el-input>
                        </el-form-item>
                        <div v-if="!scope.row.show">{{scope.row.age}}</div>
                    </テンプレート>
                </el-table-column>
                <el-table-column align="center" prop="phone" label="連絡先情報">
                    <テンプレートスコープ="スコープ">
                        <el-form-item :prop="'list.' + scope.$index + '.phone'" :rules="rules.phone"
                            v-if="スコープ行を表示">
                            <!-- <el-form-item v-if="scope.row.show"> -->
                            <el-input size="mini" v-model="scope.row.phone" placeholder="入力してください" clearable>
                            </el-input>
                        </el-form-item>
                        <div v-if="!scope.row.show">{{scope.row.phone}}</div>
                    </テンプレート>
                </el-table-column>
                <el-table-column label="操作" align="center" width="290" fixed="right">
                    <テンプレート スロット スコープ="スコープ">
                        <el-button type="text" style="color: #E6A23C;" @click="save(scope.$index, scope.row)"
                            v-if="scope.row.show" icon="el-icon-check">保存</el-button>
                        <el-button type="text" style="color: #409EFF;" @click="edit(scope.row)" v-if="!scope.row.show"
                            icon="el-icon-edit">編集</el-button>
                        <el-button type="text" style="color: #67C23A;" v-if="scope.$index+1 == listLength"
                            @click="addRow(scope.$index, scope.row)" icon="el-icon-plus">追加</el-button>
                        <el-button type="text" style="color: #F56C6C;" @click="delRow(scope.$index, scope.row)"
                            icon="el-icon-delete">削除</el-button>
                        <el-button type="text" style="color: #909399;" @click="reset('form', scope.$index)"
                            v-if="scope.row.show" icon="el-icon-refresh">リセット</el-button>
                        <!-- <el-button type="text" style="color: #909399;" @click="resetRow(scope.row)"
                            v-if="scope.row.show" icon="el-icon-refresh">リセット</el-button> -->
                    </テンプレート>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</本文>

</html>
<スクリプト>
    var アプリ = 新しい Vue({
        el: '#app',
        データ() {
            戻る {
                // フォームデータフォーム: {
                    // テーブルデータリスト: [{ id: 1, name: '', age: '', phone: '', show: true }]
                },
                // フォーム検証ルール: {
                    name: [{ required: true, message: '名前を入力してください! ', トリガー: 'ぼかし' }],
                    age: [{ required: true, message: '年齢を入力してください! ', トリガー: 'ぼかし' }],
                    phone: [{ required: true, message: '連絡先情報を入力してください! ', トリガー: 'ぼかし' }],
                },
                // デフォルトのテーブルの長さは1です
                リストの長さ: 1,
            }
        },

        メソッド: {
            // ValidatevalidateField(フォーム、インデックス) {
                結果を true にします。
                for (let item of this.$refs[form].fields) {
                    if (item.prop.split(".")[1] == インデックス) {
                        this.$refs[form].validateField(item.prop, err => {
                            (エラー!= ""の場合{
                                結果 = false;
                            }
                        });
                    }
                    if (!結果) break;
                }
                結果を返します。
            },

            // リセット [検証フィールドのみ]
            リセット(フォーム、インデックス) {
                this.$refs[form].fields.forEach(item => {
                    if (item.prop.split(".")[1] == インデックス) {
                        アイテムをリセットフィールド();
                    }
                })
            },

            // リセット [すべて]
            リセット行(行) {
                行名 = "";
                行.age = "";
                行.電話番号 = "";
            },

            // 保存 save(index, row) {
                if (!this.validateField('form', index)) return;
                行を表示します。
            },

            // 追加 addRow(index, row) {
                if (!this.validateField('form', index)) return;
                this.form.list.push({
                    id: インデックス + 2,
                    名前: ''、
                    年: ''、
                    電話: ''、
                    表示: 真
                });
                this.listLength = this.form.list.length;
            },

            // 編集 edit(row) {
                行を表示します。
            },

            // 削除 delRow(index, row) {
                if (this.form.list.length > 1) {
                    this.form.list.splice(インデックス、1);
                    this.listLength = this.form.list.length;
                } それ以外 {
                    this.form.list = [{
                        id: 1,
                        名前: ''、
                        年: ''、
                        電話: ''、
                        表示: 真
                    }];
                }
            },
        }
    })
</スクリプト>

要約する

Vue elementUI フォームのネストされたテーブルと各行のチェックに関するこの記事はこれで終わりです。より関連性の高い elementUI フォームのネストされたテーブルの内容については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3+Element+Tsは、フォームの基本的な検索リセットやその他の機能を実装します
  • Vue3.0 で要素プラス UI スタイルを導入する 2 つの方法
  • vue3 + elementPlus リセットフォームの問題

<<:  Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。

>>:  モバイル開発における 1px ラインの理解と解決策

推薦する

HTML タグのメタ概要、HTML5 のヘッド メタ属性の概要

序文metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うで...

Windows Server win2003、win2008R2、win2012、win2016、win2019 システム バージョン間の違い

最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...

Dockerコマンドは一般ユーザーが実行できるように実装されている

dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...

Vue バッチ更新 DOM 実装手順

目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...

HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...

Centos7 構成 fastdfs および nginx 分散ファイル ストレージ システムの実装プロセス分析

1. libfastcommon-1.0.43 をインストールします。インストール パッケージは h...

XHTML チュートリアル: 初心者のための XHTML の基礎

<br />当サイトのオリジナルコンテンツですので、転載の際は出典を123WORDPRE...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

React NativeのScrollViewプルダウンリフレッシュ効果

この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

nginx が複数のプロキシ層を通過して実際の送信元 IP を取得するプロセスの詳細な説明

質問Nginx は $remote_addr を実際の IP アドレスとして受け取りますが、実際には...

Vue+Springbootでインターフェースシグネチャを実装するためのサンプルコード

1. 実装のアイデアインターフェース署名の目的は、リクエストパラメータが改ざんされていないか、リクエ...