1. 動的クエリルール動的クエリルールは、おおよそ次の図のようになります。ユーザのカスタマイズに応じてクエリ文をまとめたり、SQLクエリのwhere条件を大まかに実装したりできる複合コンポーネントです。以下はmongodbのとあるソフトからの抜粋です。 2. コンポーネント構築のアイデアルールコンポーネントの構成形式によれば、それは幹と葉を持つ木とみなすことができ、難しくないように思えます。 2.1 コンポーネント属性データ: ツリー構造の内容であり、次のように定義されます。 { 条件: 'AND'、 ルール: [], } fieldList: フィールド リスト配列。選択可能なフィールドのコレクション。 operatorList: 操作リストの配列。オプションの操作のセット。次のように定義されます。 { ラベル: 'include', 値: '⊂', }, 2.2 コンポーネント HTMLここでは ElementUI を使用して構築されているため、さまざまな UI コントロールを簡単に組み合わせて、必要なインターフェイスを構築できます。 <テンプレート> <div class="ルールグループコンテナ"> <div class="rules-group-header"> <el-radio-group v-model="data.condition" size="mini"> <el-radio-button label="AND"></el-radio-button> <el-radio-button label="または"></el-radio-button> </el-ラジオグループ> <div> <el-button size="mini" @click="addRule(data)">ルールを追加</el-button> <el-button size="mini" @click="addGroup(data)">グループを追加</el-button> <el-button v-if="parent" size="mini" @click="delGroup(data, parent)">削除</el-button> </div> </div> <div class="rules-group-body"> <div class="rules-list"> <template v-for="(rule, index) in data.rules"> <div :key="index" v-if="!rule.condition" class="rule-container"> <!-- フィールド --> <wt-ドロップダウン クラス="ルール項目" v-model="rule.FilterField" :data="getFieldList(rule.FilterTable)" @change="handleFieldChange(ルール)" </wt-dropdown> <!-- 演算子 --> <wt-ドロップダウン クラス="ルール項目" v-model="rule.Operator" :disabled="inputStatus && rule.FilterField === 'コミュニティ ID'" :data="getRule(rule.FilterTable、rule.FilterField)" </wt-dropdown> <!-- 値 --> <wt-マルチドロップダウン クラス="ルール項目長" v-if="rule.type === 'ドロップダウン'" :disabled="inputStatus && rule.FilterField === 'コミュニティ ID'" v-model="rule.FilterValue" :data="getData(rule.FilterTable、rule.FilterField)" </wt-multi-dropdown> <重量番号 クラス="ルール項目長" :disabled="inputStatus && rule.FilterField === 'コミュニティ ID'" v-else-if="['DateTime', 'Number', 'Decimal'].includes(rule.type)" v-model="rule.FilterValue" </wt-number> <wt-text class="rule-item-long" v-else v-model="rule.FilterValue" :disabled="inputStatus && rule.FilterField === 'CommunityId'"></wt-text> <el-button size="mini" @click="delRule(index)">削除</el-button> </div> <ルールの作成 :key="インデックス" v-else :data="ルール" :parent="データ" :fieldList="フィールドリスト" :operatorList="演算子リスト" </ルールの作成> </テンプレート> </div> </div> </div> </テンプレート> 2.3 異なるデータ型のフィールドに異なる条件を定義する定数ルール = { 弦: [ { 値: '==', ラベル: '等しい'、 }, { 値: '<>', ラベル: '等しくない'、 }, { 値: '⊂', ラベル: 'include'、 }, { 値: '⊄', ラベル: '含まれない'、 }, { 値: 'in'、 ラベル: 「そのうちの一人」 }, { 値: 'ni'、 ラベル: 「彼らのうちの1人ではない」 }, { 値: 'mc', ラベル: 「複数の包含」、 }, ]、 番号: [ { 値: '==', ラベル: '等しい'、 }, { 値: '<>', ラベル: '等しくない'、 }, { 値: '≥', ラベル: '以上'、 }, { 値: '≤', ラベル: '以下'、 }, ]、 辞書: [ { 値: 'in'、 ラベル: 「そのうちの一人」 }, { 値: 'ni'、 ラベル: 「彼らのうちの1人ではない」 }, ]、 日付: [ { 値: 'sdiff', ラベル: '数日前'、 }, { 値: 'ediff', ラベル: 「数日後」 }, ]、 } 2.4 メソッド操作グループ\ルールの定義主な操作は、グループとルールの追加\削除です。 getRule(テーブル、フィールド) { データ = (ルール && ルール.文字列) || [] theField = this.getCurrentField(テーブル、フィールド) とします。 if (theField && theField.ControlType) { if (['ドロップダウン'].includes(theField.ControlType)) { ルール.dictを返す } そうでない場合 (['DateTime'].includes(theField.ControlType)) { ルールを返す.date } そうでない場合、(['Number', 'Decimal'].includes(theField.ControlType)) { ルール番号を返す } それ以外 { ルール文字列を返す } } データを返す }, // ルールを追加する addRule(data) { ルール = { タイプ: 'テキスト'、 フィルターテーブル: this.firstTable、 フィルターフィールド: this.firstField、 演算子: '==', フィルター値: ''、 } data.rules.push(ルール) }, // ルールを削除する delRule(index) { this.data.rules.splice(インデックス、1) }, // グループを追加 addGroup(data) { グループ = { 条件: 'OR'、 ルール: { タイプ: 'テキスト'、 フィルターテーブル: this.firstTable、 フィルターフィールド: ''、 演算子: '' フィルター値: ''、 }, ]、 } data.rules.push(グループ) }, // グループを削除する delGroup(data, parent) { インデックスを parent.rules.findIndex((item) => item === data) とします。 親.ルール.スプライス(インデックス, 1) }, 2.5 コンポーネント名の定義コンポーネントの名前は エクスポートデフォルト{ 名前: 'CreateRule', 小道具: { 親: { タイプ: オブジェクト、 }, データ: { タイプ: オブジェクト、 }, フィールドリスト: { タイプ: 配列、 デフォルト() { 戻る [] }, }, 演算子リスト: { タイプ: 配列、 デフォルト() { 戻る [] }, }, }, } 3. コンポーネントを使用するVue でコンポーネントを使用するには、コンポーネントを参照してコンポーネント リストに追加するだけです。 './CreateRule' から CreateRule をインポートします。 エクスポートデフォルト{ 名前: 'NewRuleForm', コンポーネント: ルールの作成、 }, } テンプレートへの参照を追加する <テンプレート> <div class="新しいルールフォーム"> <ルールの作成 v-if="!読み込み中" :data="データ" :fieldList="フィルターテーブル" :operatorList="演算子リスト" </ルールの作成> <div v-if="!loading" class="discription-wrap" v-html="discription"></div> </div> </テンプレート> 4. エフェクト表示これが傍受の実際の効果です。 インターフェースでは、検索基準またはフィルター基準として適切に機能し、非常に柔軟に使用できます。 5. まとめVue アプリケーションの開発では、Windows ソフトウェアのいくつかのインターフェースを参照することができ、時折大きなインスピレーションと啓発を与えてくれます。 これで、Vue の動的クエリ ルール生成コンポーネントの実装に関するこの記事は終了です。Vue の動的クエリ ルール生成コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker-Composeコマンドの使い方の詳しい説明
>>: MySQL 5.7 および MySQL 8.0 でルートパスワードを変更する方法の概要
赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...
1. 機能主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 ...
目次背景効果アイデア背景少し前に、会社のプロジェクトで問題が発生しました。地図のベースマップ領域の範...
序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...
1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...
1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...
日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...
グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...
目次概要1. jsの位置づけを明確に理解する2. 明確な学習パス3. 自己規律と粘り強さ4. 練習し...
目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...
Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...
なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...
目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...
<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...
定義と使用法<input> タグはユーザー情報を収集するために使用されます。 type ...