要素 UI に基づいてクエリ コンポーネントを段階的にカプセル化する方法

// メソッド
initSearch() {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    searchForm = {} とします。
    searchArr.forEach((val) => {
      searchForm[val.key] = ''
    })
    this.searchForm = 検索フォーム
  }
}
// マウント
マウントされた（）{
    this.initSearch()
},

// メソッド
initSearch() {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    searchForm = {} とします。
    searchArr.forEach((val) => {
      searchForm[val.key] = ''
    })
    this.searchForm = 検索フォーム
  }
}
// マウント
マウントされた（）{
    this.initSearch()
},

// props はクエリ条件を記述する searchArr 配列を渡します/**
 * クエリ条件の説明 */
検索Arr: {
  タイプ: 配列、
  デフォルト: () => []
},
// データは 2 つの変数を定義します。searchForm: バックエンドに渡されるクエリ フィールド、selectOption: ドロップダウン データ searchForm: {}、
選択オプション: {}
// マウントされたデータを初期化する initSearch() {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    searchForm = {} とします。
    searchArr.forEach((val) => {
      searchForm[val.__key] = '' // ユーザー定義フィールドを取り出してsearchFormに配置し、空の文字列を割り当てます this.setOption(val) // ドロップダウンデータの場合は、ドロップダウンリストをselectOptionに割り当てます })
    this.searchForm = 検索フォーム
  }
},
// メソッドはドロップダウンデータを設定します async setOption (val) {
  if (~['select', 'mulSelect'].indexOf(val.__type)) {
    // 最初のケースでは、ドロップダウンデータがローカルにハードコードされている場合 if (val.data && Array.isArray(val.data)) {
      this.$set(this.selectOption、val.__key、val.data) を設定します。
    } それ以外の場合 (val.fetchUrl) {
      // 2番目のケースでは、プルダウンデータがバックグラウンドインターフェースから渡された場合、const result = await request({
        url: val.fetchUrl、
        メソッド: val.method || 'post'
      })
      if (結果 && 結果データ && 結果データ.成功) {
        this.$set(this.selectOption, val.__key, result.data.list || [])
      }
    }
  }
},

// レンダリング関数 <div class="searchTable">
    <el-フォーム
      インライン={true}
      props={{モデル: this.searchForm}}
      ref="検索フォーム"
      クラス="検索フォーム">
      { 
        searchArr.map((o) => {
          components[o.__type] を返します ? components[o.__type](h, o, this) : ''
        })
      }
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>クエリ</el-button>
        <el-form-item>
          <el-link 
            スタイル="margin-left: 10px;"
            タイプ="プライマリ" 
            下線={ false } 
            on-click={ () => { this.moreShow = !this.moreShow } }>その他のクエリ</el-link>
        </el-form-item>
      </el-form-item>
      <div class="more-search アニメーション" 
           class={ this.moreShow ? 'fadeInDown' : 'fadeOutUp' } 
           v-show={ this.moreShow }>
           // ...その他のクエリ</div>
    </el-form>
</div>

  /**
   * 入力ボックスが削除されたのはなぜですか? ここではテーブルクエリを実行するだけです。 
   * 実際には、ポップアップ ウィンドウ フレームのようなフォーム送信コンポーネントをカプセル化したい場合です。 ここでもロジックを再利用することができます* @param { Function } h h Vue が提供する関数* @param { Object } ユーザーが記述した項目説明オブジェクト* @param { Object } vm Vue インスタンス*/
  エクスポートconst input = function (h, item, vm) {
    const { searchForm } = vm
    戻る （
      <el-form-item ラベル={item.label}>
        <el-入力
          サイズ="小"
          入力時に={(v) => { searchForm[item.__key] = v }}
          小道具={{
            値: searchForm[item.__key],
            プレースホルダ:「コンテンツ情報を入力」
            ...アイテム
          }}
        >
        </el-input>
      </el-form-item>
    ）
  }

  /**
   * 
   * @param { Function } h h Vue が提供する関数* @param { Object } ユーザーが記述した項目説明オブジェクト* @param { Object } vm Vue インスタンス*/
  エクスポートconst select = function (h, item, vm) {
    定数{ 
      検索フォーム = {}, 
      選択オプション = {}, 
    } = vm
    /**
     * ドロップダウンの変更イベントをリッスンします* @param { String | Number | Boolean } value ドロップダウンデータの値を選択します* @param { Object } value 
     */
    const selectChange = 関数 (値、項目) { 
      searchForm[item.__key] = 値
      vm.$emit('変更時', 値)
    }
    戻る （
      <el-form-item ラベル={item.label}>
        <el-選択
          小道具={{
            値: searchForm[item.__key],
            プレースホルダー: "===選択してください===",
            フィルタ可能: true、
            クリア可能: true、
            ...アイテム
          }}
          変更時={ (val) => { selectChange(val, item) } }
          サイズ="小">
            {
              selectOption[item.__key] && selectOption[item.__key].map((o) => {
                戻る （
                  <el-オプション 
                    キー={ o.値 } 
                    ラベル={o.text} 
                    値={ o.value } >
                  </el-option>
                ）
              })
            }
        </el-select>
      </el-form-item>
    ）
  }
  
    /**
   * 
   * 複数選択ドロップダウン ボックスの場合、単一選択メソッドに基づいて 2 つのプロパティを追加できます。このメソッドを記述することで、ユーザーは選択できる単語の数を減らすことができます。
   * @param { Function } h h Vue が提供する関数* @param { Object } ユーザーが記述した項目説明オブジェクト* @param { Object } vm Vue インスタンス*/
  エクスポートconst mulSelect = function (h, item, vm) {
    アイテム['複数'] = true
    項目['collapse-tags'] = true
    select(h, item, vm) を返す
  }

    components[o.__type] を返します ? components[o.__type](h, o, this) : ''

検索Arr: [
    {
      __type: '入力'、
      ラベル: '名前',
      __key: '名前'
    },
    {
      __type: '選択'、
      ラベル: '性別'、
      __キー: '性別'、
      フェッチURL: '/getSelect',
      メソッド: 'post'
      // データ： [
      // { テキスト: '男', 値: '1' },
      // { テキスト: '女性'、値: '0' },
      // ]
    },
]

Mock.mock(/\/getSelect/, 'post', () => {
  戻る {
    ステータス: 200、
    成功: true、
    メッセージ: 「成功を手に入れよう」
    リスト: [
      {
        テキスト: '男性'、
        値: '1'
      },
      {
        テキスト:「女性」
        値: '2'
      }
    ]、
    合計: データリストの長さ
  }
})

================ 小道具 ================
/**
 * 表示される外部クエリ条件の数*/
フロントカウント: {
  タイプ: 数値、
  デフォルト: 2
},
/**
 * 表示されるクエリ条件の数*/
バックカウント: {
  タイプ: 数値、
  デフォルト: 3
}
================= プロップ終了 ================

=============== 計算 ================
// ページに表示されるクエリ条件 frontSearchArr: function () {
  this.searchArr.slice(0, this.frontCount) を返します
},
// より多くのクエリに表示される条件 backSearchArr: function () {
  this.searchArr.slice(this.frontCount, this.searchArr.length) を返します
},
// 幅を返す getSpan: function () {
  const yu = this.backSearchArr.length % this.backCount // 残り const duan = 24 / this.backCount // 各条件の幅 if (yu === 0) {
    戻る 24
  } それ以外 {
    リターン 24 - ドゥアン
  }
}
================ 計算終了 ================

============== レンダリング ===============
  <div
    スタイル={`幅: ${this.backCount * 265 + 30}px`}
    class={ this.moreShow ? `${className} fadeInDown` : `${className} fadeOutUp` } 
    v-show={ this.moreShow }>
    <el-行>
    {
      バックサーチArr.map((o) => {
        戻る （
          <el-col span={24 / this.backCount}>
            { components[o.__type] ? components[o.__type](h, o, this) : '' }
          </el-col>
        ）
      })
    }
      <el-col class="searchBtn" span={ getSpan } >
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>クエリ</el-button>
        <el-button size="small" type="default" icon="el-icon-upload2" on-click={ () => { this.moreShow = !this.moreShow } }>縮小</el-button>
      </el-col>
    </el-row>
  </div>
=============== レンダリング終了 ===============

{
  __type: '選択'、
  __key: '州'、
  __fetchUrl: '/getProvince',
  __メソッド: 'get'、
  __nextKey: '都市',
  __nextFetch: '/getCity',
  __nextParam: ['州'],
  __nextMethod: 'get'、
  __emptyArr: ['都市', '地区'],
  ラベル: '州'、
  ラベル幅: '40px',
},
{
  __type: '選択'、
  __キー: '都市',
  __メソッド: 'get'、
  __nextKey: '地区',
  __nextFetch: '/getDistrict',
  __nextParam: ['州', '都市'],
  __nextMethod: 'get'、
  __emptyArr: ['地区'],
  ラベル: '都市',
  ラベル幅: '40px',
},
{
  __type: '選択'、
  __key: '地区',
  ラベル: '地区',
  ラベル幅: '40px',
}

__nextKey: 'city', // どのドロップダウン データに値が割り当てられるか__nextFetch: '/getCity', // 割り当てのリクエスト インターフェイス__nextParam: ['province'], // リクエスト パラメータ__nextMethod: 'get', // リクエスト メソッド__emptyArr: ['city', 'district'] // ドロップダウン データが変更された場合、どのドロップダウン カテゴリをクリアする必要があるか/**
 * ドロップダウンの変更イベントをリッスンします* @param { String | Number | Boolean } value ドロップダウンデータの値を選択します* @param { Object } value 
 */
const selectChange = 非同期関数 (値、項目) { 
  searchForm[item.__key] = 値
  // ドロップダウンリストとドロップダウンデータを空にする if (item && item.__emptyArr) {
    (i = 0 とします; i < item.__emptyArr.length; i++) {
      キーをitem.__emptyArr[i]とします。
      if (selectOption[キー]) {
        selectOption[キー] = []
      }
      vm.$set(検索フォーム、キー、'')
    }
  }
  if (item && item.__nextFetch && item.__nextParam) {
    パラメータを {} とします
    (j = 0 とします; j < item.__nextParam.length; j++) {
      値 = searchForm[item.__nextParam[j]] とする
      if (値) {
        param[item.__nextParam[j]] = 値
      }
    }
    const res = リクエストを待つ({
      url: item.__nextFetch、
      メソッド: item.__nextMethod || 'post'
    }, パラメータ)
    もし（res）{
      {データ} = resとします
      if (データ && data.success) {
        vm.$set(selectOption、item.__nextKey、data.list) を設定します。
      }
    }
  }
  vm.$emit('変更時', 値)
}

/**
 * 日付ピッカー * @param {*} h 
 * @param {*} アイテム 
 * @param {*} 仮想メモリ 
 */
エクスポートconst date = function (h, item, vm) {
  const { searchForm } = vm
  戻る （
    <el-form-item label={item.label} labelWidth={item.labelWidth}>
        <el-日付ピッカー
        入力時に={(v) => { searchForm[item.__key] = v }}
        小道具={{
          タイプ: '日付'、
          サイズ: 「小」、
          値: searchForm[item.__key],
          プレースホルダー:「日付を選択」、
          ...アイテム
        }}
      >
      </el-date-picker>
    </el-form-item>
  ）
}

// searchArrを使用する場合は{を追加
  __type: '日付'、
  __key: '誕生日'、
  ラベル: '誕生日'
}

        <クエリ情報 ref="クエリ情報" on-remove={this.removeTag} 選択オプション={ this.selectOption }></クエリ情報>

削除タグ (名前) {
  this.searchForm[名前] = ''
  this.queryTable()
}

// クエリ queryTable() {
  this.$refs.queryInfo && this.$refs.queryInfo.queryTable(this.searchForm)
  this.moreShow = false
  this.$emit('search', this.searchForm)
}

<テンプレート>
  <div class="クエリ情報">
    <elタグ
      v-for="タグ内のタグ"
      :key="タグ"
      閉じられる
      スタイル="margin-right: 10px;"
      @close="(タグ)を閉じる"
      >
      {{displayName(タグ)}}
    </el-tag>
  </div>
</テンプレート>

<スクリプト>
'@/utils/utils' から { getTitle } をインポートします。
エクスポートデフォルト{
  小道具: {
    // ドロップダウンデータ選択オプション: {
      タイプ: オブジェクト、
      デフォルト: () => []
    }
  },
  データ （） {
    戻る {
      // クエリ条件 searchForm: {}
    }
  },
  計算: {
    /// 入力条件配列タグを計算する: function () {
      タグを [] にする
      キーをObject.keys(this.searchForm)とします。
      keys.forEach((キー) => {
        if (this.searchForm[キー]) {
          tags.push(キー)
        }
      })
      リターンタグ
    }
  },
  メソッド: {
    // クリックして閉じる close (tag) {
      this.searchForm[タグ] = ''
      this.$emit('remove', タグ)
    },
    // 外部から呼び出されるメソッド queryTable (searchForm) {
      this.searchForm = JSON.parse(JSON.stringify(searchForm))
    },
    // 名前を表示します。ドロップダウンデータの場合は、ドロップダウンデータ内の名前と一致して表示されます。displayName(key) {
      値 = this.searchForm[キー]
      if (this.selectionOption[キー]) {
        getTitle(値、this.selectionOption[key]) を返します
      } それ以外 {
        戻り値
      }
    }
  }
}
</スクリプト>

<スタイルスコープ>
.クエリ情報{
  下マージン: 10px;
}
</スタイル>

<div class="right">
  {this.$slots.rightButton}
</div>

// <search-table :searchArr="searchArr" @search="search"> を使用します
  <テンプレート v-slot:rightButton>
    <el-ボタン 
      サイズ="小" 
      タイプ="成功" 
      @click="() => { MessageBox({ message: '開発中', type: '警告' })}">
      追加</el-button>
  </テンプレート> 
</検索テーブル>
コードをコピー