必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えています。 必要: 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux コマンドラインで電卓を使用する 5 つのコマンド
>>: SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル
この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...
目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...
この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...
imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...
クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...
float の使用例左サスペンション: float:left;右サスペンション: float:rig...
すべてのプラットフォーム用の MySQL ダウンロードは、MySQL ダウンロードから入手できます。...
概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...
目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...
1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...
この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...
1. テーブルAのデータを使用してMySQLのテーブルBの内容を更新するたとえば、データ テーブル内...
CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...
簡単に言うと、srcは「このリソースをロードしたい」という意味で、hrefは「このリソースに関連付け...
1. nmonの紹介Nmon (Nigel's Monitor) は、AIX および Lin...