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 でルートパスワードを変更する方法の概要
ウェブサイトのフロントエンド開発で発生するセキュリティ問題は、クライアントブラウザで実行されるコード...
ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...
この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...
Ⅰ. 問題の説明: html+css を使用してシンプルなナビゲーション バーを実装します。 **...
目次1. オブジェクトをマップとして扱わない1. 未定義のプロパティはプロトタイプチェーンを通じてア...
序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...
最近のプロジェクトでは、Google ロボット認証を使用する必要があります。これには VPN が必要...
目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...
序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...
導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...
目次1. 関数デバウンス1. 画像安定化とは何ですか? 2. 関数のスロットリング2.1 タイマーの...
目次序文 👀リサーチを始めましょう🐱🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...
1. Get はサーバーからデータを取得するために使用され、Post はサーバーにデータを渡すために...
参考までに、Canvas をベースにしたダイナミッククロックのデモを用意しました。具体的な内容は次の...
インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...