エフェクト表示まずこれが望ましい効果かどうかを確認してください^_^ 図に示すように、ElementUI フォームにはテーブルがネストされています。テーブルの各行では、[保存]、[追加]、[編集]、[削除]、[リセット] などの操作を実行できます。同時に、各行の特定のフィールドを検証できます (フォーム全体ではなく)。この要件は非常に一般的なので、記録されています。 コードリンクgiteeアドレス キーコード表形式データ// データ形式は [オブジェクトネスト配列] である必要があります。[フォーム] はフォームにバインドされ、[リスト] はテーブルフォームにバインドされます: { // テーブルデータリスト: [ { id: 1、名前: 'Xiaoye'、年齢: '12'、電話番号: '123456'、表示: true }、 { id: 2、名前: 'Xiao Li'、年齢: '23'、電話番号: '123457'、表示: true }、 { id: 3、名前: '小林'、年齢: '12'、電話番号: '123458'、表示: true } ] }, コンポーネントのネスト
// フォームはテーブルの外側にネストする必要があり、フォームは [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> 検証方法
// フォーム検証メソッド // [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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。
序文metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うで...
最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...
dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...
目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...
htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...
ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...
1. libfastcommon-1.0.43 をインストールします。インストール パッケージは h...
<br />当サイトのオリジナルコンテンツですので、転載の際は出典を123WORDPRE...
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...
1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...
1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...
ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...
質問Nginx は $remote_addr を実際の IP アドレスとして受け取りますが、実際には...
1. 実装のアイデアインターフェース署名の目的は、リクエストパラメータが改ざんされていないか、リクエ...