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 でルートパスワードを変更する方法の概要

推薦する

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

vue keep-alive の簡単な概要

1. 機能主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 ...

arcgis.js は、マップ本体の表示範囲を制御し、領域を超えた場合に自動的にバウンスするようにします (実装のアイデア)

目次背景効果アイデア背景少し前に、会社のプロジェクトで問題が発生しました。地図のベースマップ領域の範...

オンライン MYSQL 同期エラーのトラブルシューティング方法の概要 (必読)

序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...

CSS属性のマージンの理解について話す

1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...

docker で Apollo をデプロイする詳細なチュートリアル

1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...

SQLでEXPLAINコマンドを使用する方法

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

JSを段階的に学ぶ方法についての簡単な説明

目次概要1. jsの位置づけを明確に理解する2. 明確な学習パス3. 自己規律と粘り強さ4. 練習し...

Golang を使って Docker API を実際に操作する

目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...

Dockerで複数のSpringbootを実行するための詳細なチュートリアル

Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...

docker view container log コマンドの実装

なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

XHTML Web ページ チュートリアル

<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...

HTML の <input> タグの詳細な説明と、それを無効にする方法

定義と使用法<input> タグはユーザー情報を収集するために使用されます。 type ...