Antd+vueは円形属性フォームの動的検証のアイデアを実現します

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えています。

必要:

1. 名前、比較項目、備考は必須です。デフォルトは 1 行です。複数行追加できます。

2. 名前に基づいて比較項目リストを動的に要求します。名前が変更されると、その行で現在選択されている比較項目がクリアされます。

アイデア: 検索全体を 2 つの形式に分割し、個別に検証を実行します。 1つは動的に追加されたループフォームで、もう1つは通常のフォームのdateFormです。

html

			<a-form :form="フォーム" @keyup.enter.native='searchQuery'>
				<div class="dynamic-wrap">
					<div v-for="(item,index) in formList" :key="index">
						<a行:ガター="24">
							<a-col :span="6">
								<a-form-item label="名前" :labelCol="{span: 7}" :wrapperCol="{span: 17}">
									<a-select placeholder='名前を選択してください'
									          v-decorator="[`equipment[${index}]`,{ initialValue: formList[index] ? formList[index].equipment : '', ルール: [{ required: true, message: '装備を選択してください!' }]}]"
									          @change="(e)=>equipChange(e,index)">
										<a-select-option v-for='formList[index].eqpList内のオプション' :key='options.name' :value='options.name'>
											{{ オプション.name }}
										</a-選択オプション>
									</a-選択>
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="比較項目" :labelCol="{span: 7}" :wrapperCol="{span: 17}">
									<a-選択
										placeholder="比較項目を選択してください"
										v-decorator="[`dataCode[${index}]`,{initialValue: formList[index] ? formList[index].dataCode : '',rules: [{ required: true, message: '比較項目を選択してください!' }]}]">
										<a-select-option v-for='formList[index].dataTypeListのオプション' :key='option.name' :value='option.name'>
											{{ オプション名 }}
										</a-選択オプション>
									</a-選択>
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="備考" :labelCol="{span: 6}" :wrapperCol="{span: 18}">
									<a-input v-decorator="[`remark[${index}]`]" placeholder="コメントを入力してください"></a-input>
								</a-form-item>
							</a-col>
							<a-col :span="2" style="padding-left: 0px">
								<a-form-item :labelCol="{span: 0}" :wrapperCol="{span: 24}">
									<テンプレート v-if="フォームリストの長さ > 1">
										<a-icon type="delete" @click="removeRow(index)"/>
									</テンプレート>
								</a-form-item>
							</a-col>
						</a行>
					</div>
				</div>
			</a-フォーム>
 
			<a-form :form="dateForm" インライン @keyup.enter.native='searchQuery'>
				<a-form-item label='クエリ日付' :labelCol="{span: 8}" :wrapperCol="{span: 16}"
				             スタイル="display: インラインブロック;幅: 300px;">
					<日付選択
						スタイル="幅: 200px;"
						クラス='クエリグループ-cust'
						v-decorator="['startTime', { ルール: [{ 必須: true, メッセージ: '開始時刻を選択してください!' }] }]"
						:disabled-date='無効開始日'
						フォーマット='YYYY-MM-DD'
						placeholder='開始時間を選択してください'
						@change='handleStart($event)'
						@openChange='handleStartOpenChange'></a-date-picker>
				</a-form-item>
				<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
				<a-form-item スタイル="display: インラインブロック;幅: 200px;">
					<日付選択
						スタイル="幅: 200px;"
						クラス='クエリグループ-cust'
						v-decorator="['endTime', { ルール: [{ 必須: true, メッセージ: '終了時刻を選択してください!' }] }]"
						:disabled-date='無効終了日'
						フォーマット='YYYY-MM-DD'
						placeholder='終了時間を選択してください'
						@change='handleEnd($event)'
						:open='endOpen'
						@openChange='handleEndOpenChange'></a-date-picker>
				</a-form-item>
				<span style="margin-left: 10px">
				        <a-button type='primary' :disabled='loading' @click='searchQuery' icon='search'>検索</a-button>
				        <a-button type='primary' @click='searchReset' icon='search' style='margin-left:10px'>リセット</a-button>
				        <a-button type="primary" icon="plus" @click="addRow" style='margin-left:10px'>クエリ条件を追加する</a-button>
			        </span>
			</a-フォーム>
			<p>クエリ条件は次のとおりです: {{searchData}}</p>

js

initForm() {
				// まずデバイスリストを要求し、それをeqpListに保存します // フォームを初期化します this.formList.push({
					装置: ''、
					データコード: ''、
					述べる: ''、
					eqpList: this.eqpList、
					データ型リスト: []
				})
			},
			// 行を削除する handleRemove(index) {
				if (this.formList.length === 1) {
					戻る
				}
				this.formList.splice(インデックス、1)
			},
			// 新しい行を追加する handleAdd() {
				this.formList.push({
					装置: ''、
					データコード: ''、
					述べる: ''、
					eqpList: this.eqpList, // インターフェースに応じて動的に取得できます。ここでは、簡単にデモンストレーションして直接割り当てることができます。 dataTypeList: [], // インターフェースに応じて動的に取得でき、デバイスに応じて関連付けることができます。 })
			},
			装備変更(値、インデックス) {
				// 値を変更する this.formList[index].equipment = value;
				//現在選択されているデバイスに対応する比較項目リストを同期的に更新します this.handleEqpIdentity(value, index)
			},
			// デバイスに応じて対応する比較項目リストを照会します handleEqpIdentity(value, index) {
				this.dataTypeList = []; // dataTypeListをクリアする
				this.formList[index].dataTypeList = []; // 現在の行のdataTypeListをクリアする
				//新しい装備名に応じて対応する比較項目リストを取得します getAction(this.url.getDataTypeList, {equipment: value})
					.then((res) => {
						(res.成功)の場合{
							this.dataTypeList = res.result;
							this.formList[インデックス].dataTypeList = this.dataTypeList;
							// this.formList[index].dataCode = ''; null 値を直接割り当てるのは無効です // getFieldValue、setFieldsValue を使用する必要があります
							dataCode1Arr = this.form.getFieldValue('dataCode'); とします。
							(dataCode1Arr.length !== 0) の場合 {
								dataCode1Arr[インデックス] = ''
							}
							this.form.setFieldsValue({データコード: dataCode1Arr})
						} それ以外 {
							this.$message.warning(res.message)
						}
					})
					.catch(() => {
						this.$message.error('取得に失敗しました。もう一度お試しください!')
					})
			},
// クリッククエリ searchQuery() {
				// 最初にループフォームを検証する const {form: {validateFields}} = this
				検証フィールド((エラー、値) => {
					もしエラーなら
						this.dateForm.validateFields((dateErr, dateValues) => {
							//日付検索フォームを再検証する dateValues.startTime = moment(dateValues.startTime).format('YYYY-MM-DD')
							dateValues.endTime = moment(dateValues.endTime).format('YYYY-MM-DD')
							場合 (!dateErr) {
								this.loading = true;
								formData を Object.assign({}, dateValues); とします。
								// バックグラウンドで必要なデータ構造に整理します // ループ形式 let searchArr = [];
								(値[`機器`]).forEach((アイテム, インデックス) => {
									定数オブジェクト = {
										装備: アイテム、
										注釈: 値[`注釈`][インデックス],
										データコード: 値[`データコード`][インデックス]
									}
									searchArr.push(obj);
 
								})
								// 日付形式 if (!dateValues.startTime) {
									formData.startTime = moment(新しい日付()).format('YYYY-MM-DD')
								}
								formData.eqpInfoParamVoList = searchArr;
								this.searchData = JSON.parse(フォームデータ)
							  // リクエストインターフェース }
						})
					}
				})
			},

antd vue の動的検証ループ属性フォームの実装に関するこの記事はこれで終わりです。antd vue の動的検証ループ属性フォームの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現
  • vue3.0 での antdv の例の使いやすい使用法の詳細な説明
  • Antd-vue テーブルコンポーネントは、データ行をクリックするためのクリックイベントを追加します。チュートリアル
  • Antd vue テーブルは行間でセルを結合し、コンテンツ インスタンスをカスタマイズします。
  • antd vue refreshは現在のページルートを保持し、選択されたメニューを保持し、メニュー選択操作を保持します
  • Vue の Table コンポーネント行に右クリック メニューを実装する方法 (vue + AntDesign ベース)

<<:  Linux コマンドラインで電卓を使用する 5 つのコマンド

>>:  SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

推薦する

Nginx フォワード プロキシとリバース プロキシ、および負荷分散機能の構成コード例

この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...

Linux システムで MySQL の文字セットを UTF8 に変更する手順

目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...

HTML ウェブページのブラウザタイトルバーに小さなアイコンを表示する方法

この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...

Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...

HTMLフロートの使用法の簡単な分析

float の使用例左サスペンション: float:left;右サスペンション: float:rig...

LinuxにMySQLをインストールするための詳細なチュートリアル

すべてのプラットフォーム用の MySQL ダウンロードは、MySQL ダウンロードから入手できます。...

MySQL ステートメントロックの実装の分析

概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...

Docker管理に関する断片的な知識のまとめ

目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...

CentOS8 デプロイメント LNMP 環境で mysql8.0.29 をコンパイルしてインストールする方法の詳細なチュートリアル

1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...

MySQL における単一テーブルと複数テーブル、およびビューと一時テーブルに対する Update と Select の違い

1. テーブルAのデータを使用してMySQLのテーブルBの内容を更新するたとえば、データ テーブル内...

VMware仮想マシンにLinux(CentOS)をインストールするための詳細な構成手順

CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...

HTML における src と href の違いについての簡単な説明

簡単に言うと、srcは「このリソースをロードしたい」という意味で、hrefは「このリソースに関連付け...