Vueは動的クエリルール生成コンポーネントを実装します

Vueは動的クエリルール生成コンポーネントを実装します

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で、定義コードは非常にシンプルです。

エクスポートデフォルト{
    名前: '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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue コンポーネントを使用して期間別にデータをクエリする方法の詳細な説明
  • Vue 入力ボックスのファジークエリのサンプルコード
  • VueはInput入力ボックスのファジークエリメソッドを実装します
  • Vue.jsはページングクエリ機能を実装します
  • Vueは時間をクリックして期間クエリを取得する機能を実装します
  • Vue.js でのクエリ操作の詳細な例
  • Vue.js フレームワークを使用して列車チケット検索システムを実装する (ソースコード付き)
  • vue.js をベースにページングクエリ機能を実装する
  • Bootstrap4 + Vue2 を使用してページング クエリを実装するサンプル コード
  • vue+element カスタムクエリコンポーネント

<<:  Docker-Composeコマンドの使い方の詳しい説明

>>:  MySQL 5.7 および MySQL 8.0 でルートパスワードを変更する方法の概要

推薦する

ウェブフロントエンドに対する一般的な攻撃とその防止方法

ウェブサイトのフロントエンド開発で発生するセキュリティ問題は、クライアントブラウザで実行されるコード...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

JavaScript にはすでに Object があるのに、なぜ Map が必要なのでしょうか?

目次1. オブジェクトをマップとして扱わない1. 未定義のプロパティはプロトタイプチェーンを通じてア...

数千万データを持つMySQLテーブルを最適化する実践記録

序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...

Google Recaptcha 認証を使用した Vue 実装例

最近のプロジェクトでは、Google ロボット認証を使用する必要があります。これには VPN が必要...

開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)

目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

Mysql の使用法の概要

導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...

JavaScriptのアンチシェイクとスロットリングとは

目次1. 関数デバウンス1. 画像安定化とは何ですか? 2. 関数のスロットリング2.1 タイマーの...

JavaScript 配列重複排除問題の詳細な研究

目次序文 👀リサーチを始めましょう🐱‍🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...

GET POSTの違い

1. Get はサーバーからデータを取得するために使用され、Post はサーバーにデータを渡すために...

JS+Canvas でダイナミックな時計効果を実現

参考までに、Canvas をベースにしたダイナミッククロックのデモを用意しました。具体的な内容は次の...

Linux自動ログイン例の説明

インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...