vue+element カスタムクエリコンポーネント

// データフォーム.vue
<テンプレート>
  <el-行>
    <input-form v-for="(item,index) オプション内" :key="'dataForm_'+index"> 
      <!-- 入力ボックス-->
      <入力フォーム
        :key="インデックス"
        v-if="item.type == '入力'"
        :data='アイテム'
      </入力フォーム>
  </el-row>
</テンプレート>
<スクリプト>
「@/assets/js/eventBus.js」からEventBusをインポートします。
InputForm をインポートします "@/components/dataForm/InputForm"
エクスポートデフォルト{
  コンポーネント:
    入力フォーム、
  },
  小道具: {
    /**
     * フォーム構成項目 * @param {Object} オプション 構成パラメータは次のとおりです。
     * タイプ: フォーム項目タイプ、文字列、オプションの値入力
     */
    オプション:
      タイプ: 配列、
      デフォルト（） {
        戻る [];
      },
    },
  },
  データ（） {
   戻る {}
  },
  作成された() {
   // これは主にドロップダウンボックス内の他のサブコンポーネントの表示と非表示を実現するためです。EventBus.$on("refreshDataForm", e => {
      this.refreshDataForm(e);
    });
  },
  // ページ破棄イベントの破棄 beforeDestroy() {
    EventBus.$off("refreshDataForm")
    EventBus.$off("handleClick")
  },
  メソッド: {
   // フォームデータを更新する refreshDataForm(item) {
      データ = this.options とします
      データ.forEach((e, i) => {
        if (item.type == e.type && item.name == e.name) {
          this.options[i] = アイテム
        }
      })
    },
    // 子コンポーネントのクリックイベントが親コンポーネントに応答し、データが転送されます handleClick(data) {
     EventBus.$emit("handleClick",データ)
    },
    //フォームデータをフォーマットします（必須項目が必須かどうかを確認できます）
    getDataForm() {
     データ = this.options とします
     formObj = {} とします。
     エラー = ''
     試す {
      データ.forEach(e => {
       if (e.type === ''入力) {
        if (e.require && !e.content) {
         error = '入力してください' + e.label
         エラーをスローする
        }
        formObj[e.name] = e.content
       } そうでない場合 (e.type === 'select' || e.type === 'dataSelect') {
        if (e.require && !e.content) {
         エラー = '選択してください' + e.label
         エラーをスローする
        }
        formObj[e.name] = e.content
       } そうでない場合 (e.type === 'date' || e.type === 'dataRadio') {
        if (e.require && !e.content) {
         エラー = '選択してください' + e.label
         エラーをスローする
        }
        フォームオブジェクト[e.beginName] = e.beginRegTime
        フォームオブジェクト[e.endName] = e.endRegTime
       } そうでない場合 (e.type === 'image') {
        formObj[e.name] = e.file || e.content
       } そうでない場合 (e.type === 'アップロード') {
        formObj[e.name] = e.file || e.content
        if (e.delFileName) { // 添付ファイルのコレクションとカスタム名およびデフォルト名を削除します formObj[e.delFileName] = e.delFileIds.join(',')
        } それ以外 {
         formObj['delFileName'] = e.delFileIds.join(',')
        }
       }
      })
      返品フォームObj
     } キャッチ（エラー）{
      this.$message({ message:error, type: 'error'})
     }
    }
  }
}

<テンプレート>
  <エル-コル>
    <el-col :span="data.boxSpan?data.boxSpan:boxSpan" v-if="!data.isHide">
     <el-col :span="data.infoSpan?data.infoSpan:infoSpan">
      <el-col :span="data.infoSpan?data.infoSpan:infoSpan" v-if="data.labelSpan!=0">
       <label class="el-form-item_label" :class="{'require': data.require}" v-html="data.label"></label>
      </el-col>
      <el-col :span="data.contentSpan?data.contentSpan:contentSpan" v-if="data.contentSpan!=0">
       <el-input :class="{'base_textarea': data.textarea}" v-modle.trim="data.content" :type="data.textarea?'textarea':''" :disable="data.readOnly" :placeholder="setPlaceholder" maxlength="200"></el-input>
      </el-col>
     </el-col>
      <span v-text="タイトル"></span>
    </div>
  </el-col>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 小道具: {
  // 入力ボックスタイプを入力します: {
   タイプ: 文字列、
   デフォルト: 'input'
  },
  //デフォルトのフェンスレイアウト 8/24
  ボックススパン: {
   タイプ: 数値、
   デフォルト: 8
  },
  // デフォルトのフェンスレイアウト 24/24
  情報範囲: {
   タイプ: 数値、
   デフォルト: 24
  },
  //デフォルトのフェンスレイアウト 8/24
  スパン: {
   タイプ: 数値、
   デフォルト: 8
  },
  //デフォルトのフェンスレイアウト 16/24
  コンテンツスパン: {
   タイプ: 数値、
   デフォルト: 16
  },
  /**
  * name キーワード * type フォームタイプ * label フォームタイトル * content フォームコンテンツ * readOnly 読み取り専用 デフォルト いいえ * isHide 非表示 デフォルト いいえ * textarea テキストタイプ デフォルト いいえ **/
  データ： {
   タイプ: オブジェクト、
   デフォルト（） {
    戻る []
   }
  }
 },
 計算: {
  プレースホルダーを設定する() {
   if(this.data.readOnly && !this.data.content) {
    戻る ''
   } 
   「入力してください」を返す
  }
 }
}
</スクリプト>
<スタイルスコープ>
 // 必須 style.require::after {
  コンテンツ： '*';
  色：赤;
 }
 // フレックスレイアウトのタイトルを垂直に中央揃えします。el-form-item__label {
  フロート:右;
  マージンボトム:0;
  行の高さ: 20px;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  最小高さ: 40px;
 }
</スタイル>

<テンプレート>
  <el-行>
    <データフォーム:options='searchArray' ref='searchArray'></入力フォーム>
  </el-row>
</テンプレート>

<スクリプト>
 「@/assets/js/eventBus.js」からEventBusをインポートします。
 DataForm をインポートします "@/components/dataForm/dataForm"
 エクスポートデフォルト{
  コンポーネント:
   データフォーム
  },
  データ（） {
   戻る {
    // クエリメニュー構成 searchArray: [
     {
      名前: 'personName',
      タイプ: '入力'、
      ラベル: 'ユーザー名',
      コンテンツ： ''
     },
     {
      名前: 'personName2',
      タイプ: '入力'、
      ラベル: 'ユーザー名 2',
      コンテンツ： ''
     }
    ]
   }
  },
  作成された() {
   // 子コンポーネントのパラメータをリッスンする EventBus.$on('refreshDataForm', e => {
    this.refreshDataForm(e)
   })
  },
  破壊された() {
   // サブコンポーネントパラメータを破棄します。EventBus.$off('refreshDataForm')
  },
  メソッド: {
   // サブコンポーネント操作をリッスンする refreshDataForm(e) {
    //ロジックコード this.$forceUpdate()
   },
   //データクエリ handleQuery() {
     // コンポーネントパラメータを取得し、json 形式で返します。let searchArray = this.$refs.searchArray.getDataForm()
    // 必須項目がある場合、戻り値は null となり、ポップアップウィンドウが表示されます if (!searchArray) {
     戻る 
    }
    //クエリインターフェースロジック}
  }
 }
</スクリプト>