Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明
エフェクト表示まずこれが望ましい効果かどうかを確認してください^_^
図に示すように、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テーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。
推薦する
VScode設定のリモートデバッグLinuxプログラムの問題を解決する
VScode リモートデバッグ Linux プログラムの問題について見てみましょう。具体的な内容は以...
高性能ウェブサイトの最適化ガイド
パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ～ 20% が HTML ドキュメ...
HTML 要素 noscript の使用の紹介
noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...
メニューのホバー効果を実現するCSS3
結果： html <nav id="nav-1"> <a cl...
MySQL InnoDB ReplicaSet の簡単な紹介
目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...
JavaScript で外部変数にアクセスするサブ関数の 3 つのソリューション
序文Web ページを作成するときに、次のような状況に遭遇することはよくあります。 <本文>...
HTML テーブルの境界線を設定する際のヒント
HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...
クリックイメージ反転効果を実現するJavaScript
最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...
MySQL データ圧縮パフォーマンス比較の詳細
目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...
MySQL 5.1 のパスワードを変更し、MySQL データベースにリモートでログインする方法
mysql ユーザーを作成し、承認します。形式: 「ユーザー パスワード」で識別されるユーザー@ログ...
Vue3 の使用 (パート 1) Vue CLI プロジェクトの作成
目次1. 公式ドキュメント2. Vue CLIプロジェクトを作成する1. Vue CLIをインストー...
MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します
Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...
SSMプロジェクトは、ホットデプロイメント構成を実装するためにTomcatとMavenを使用してWARパッケージとしてデプロイされることが多い。
背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...
MySQL でコミットされていないトランザクション情報を見つける方法
少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...
MySQL 5.7.18 Green Edition のダウンロードとインストールのチュートリアル
この記事では、MySQL 5.7.18のグリーンバージョンをダウンロードしてインストールする詳細な手...