Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

1. Dynamische Abfrageregeln

Die dynamischen Abfrageregeln sind ungefähr wie in der folgenden Abbildung dargestellt. Es handelt sich um eine komplexe Komponente, die Abfrageanweisungen entsprechend der Benutzeranpassung organisieren und die Where-Bedingung der SQL-Abfrage grob implementieren kann. Das Folgende ist ein Auszug aus einer bestimmten Software von MongoDB.

Bildbeschreibung hier einfügen

2. Ideen zur Komponentenkonstruktion

Aufgrund der Organisationsform der Regelkomponenten kann man sie als einen Baum mit Stamm und Blättern betrachten, was nicht schwierig erscheint.

2.1 Komponentenattributdaten: sind der Inhalt der Baumstruktur, den wir wie folgt definieren:

{
Bedingung: 'UND',
Regeln: [],
}

fieldList: Feldlisten-Array, eine Sammlung von zur Auswahl verfügbaren Feldern;

Operatorliste: Ein Array von Operationslisten, eine Reihe optionaler Operationen, die wie folgt definiert sind:

{
     Bezeichnung: 'einschließen',
          Wert: '⊂',
},

2.2 Komponenten-HTML

Zum Erstellen wird hier ElementUI verwendet, sodass Sie problemlos verschiedene UI-Steuerelemente kombinieren können, um die erforderliche Schnittstelle zu erstellen.
Da diese Komponente als Baum betrachtet wird, handelt es sich natürlich auch um eine rekursive Komponente, sodass auch ihr eigener Aufruf erforderlich ist.

<Vorlage>
    <div Klasse="Regeln-Gruppen-Container">
        <div Klasse="Regeln-Gruppen-Header">
            <el-radio-group v-model="Daten.Zustand" Größe="mini">
                <el-radio-button label="UND"></el-radio-button>
                <el-radio-button label="ODER"></el-radio-button>
            </el-radio-gruppe>
            <div>
                <el-button size="mini" @click="addRule(data)">Regel hinzufügen</el-button>
                <el-button size="mini" @click="addGroup(data)">Gruppe hinzufügen</el-button>
                <el-button v-if="parent" size="mini" @click="delGroup(data, parent)">Löschen</el-button>
            </div>
        </div>
        <div Klasse="Regeln-Gruppen-Body">
            <div Klasse="Regelliste">
                <template v-for="(Regel, Index) in Daten.Regeln">
                    <div :key="index" v-if="!regel.bedingung" class="regel-container">                        
                        <!-- Felder -->
                        <wt-Dropdown
                            Klasse="Regelelement"
                            v-model="Regel.FilterFeld"
                            :data="getFieldList(Regel.FilterTable)"
                            @change="handleFieldChange(Regel)"
                        ></wt-dropdown>
                        <!-- Operator -->
                        <wt-Dropdown
                            Klasse="Regelelement"
                            v-model="Regel.Operator"
                            :deaktiviert="EingabeStatus && Regel.FilterField === 'CommunityId'"
                            :data="getRule(regel.FilterTable, regel.FilterField)"
                        ></wt-dropdown>
                        <!-- Wert -->
                        <wt-multi-dropdown
                            Klasse = "Regel-Element lang"
                            v-if="Regel.Typ === 'Dropdown'"
                            :deaktiviert="EingabeStatus && Regel.FilterField === 'CommunityId'"
                            v-Modell="Regel.Filterwert"
                            :data="getData(Regel.Filtertabelle, Regel.Filterfeld)"
                        ></wt-multi-dropdown>
                        <wt-Nummer
                            Klasse = "Regel-Element lang"
                            :deaktiviert="EingabeStatus && Regel.FilterField === 'CommunityId'"
                            v-else-if="['Datum/Uhrzeit', 'Zahl', 'Dezimalzahl'].includes(rule.type)"
                            v-Modell="Regel.Filterwert"
                        ></wt-Nummer>
                        <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)">Löschen</el-button>
                    </div>
                    <Regel erstellen
                        :Schlüssel="Index"
                        v-sonst
                        :data="Regel"
                        :parent="Daten"
                        :FeldListe="FeldListe"
                        :operatorList="Operatorliste"
                    ></RegelErstellen>
                </Vorlage>
            </div>
        </div>
    </div>
</Vorlage>

2.3 Definieren Sie unterschiedliche Bedingungen für Felder unterschiedlicher Datentypen

const Regeln = {
    Zeichenfolge: [
        {
            Wert: '==',
            Bezeichnung: 'gleich',
        },
        {
            Wert: '<>',
            Bezeichnung: 'ungleich',
        },
        {
            Wert: '⊂',
            Bezeichnung: 'einschließen',
        },
        {
            Wert: '⊄',
            Bezeichnung: 'enthält nicht',
        },
        {
            Wert: 'in',
            Beschriftung: 'Einer von ihnen',
        },
        {
            Wert: 'ni',
            Etikett: 'Keiner von ihnen',
        },
        {
            Wert: 'mc',
            Bezeichnung: „Mehrere Einschlüsse“,
        },
    ],
    Nummer: [
        {
            Wert: '==',
            Bezeichnung: 'gleich',
        },
        {
            Wert: '<>',
            Bezeichnung: 'ungleich',
        },
        {
            Wert: '≥',
            Bezeichnung: 'größer als oder gleich',
        },
        {
            Wert: '≤',
            Bezeichnung: 'kleiner als oder gleich',
        },
    ],
    diktieren: [
        {
            Wert: 'in',
            Beschriftung: 'Einer von ihnen',
        },
        {
            Wert: 'ni',
            Etikett: 'Keiner von ihnen',
        },
    ],
    Datum: [
        {
            Wert: 'sdiff',
            Beschriftung: 'Vor ein paar Tagen',
        },
        {
            Wert: 'ediff',
            Beschriftung: 'Ein paar Tage später',
        },
    ],
}

2.4 Methodenoperationsgruppen/Regeln definieren

Die wichtigsten Vorgänge umfassen das Hinzufügen/Löschen von Gruppen und Regeln .

getRule(Tabelle, Feld) {
            let data = (Regeln && Regeln.Zeichenfolge) || []
            let theField = this.getCurrentField(Tabelle, Feld)
            if (dasFeld && dasFeld.SteuerelementTyp) {
                wenn (['Dropdown'].includes(theField.ControlType)) {
                    Rückgaberegeln.dict
                } sonst wenn (['Datum/Uhrzeit'].includes(theField.ControlType)) {
                    Rückgaberegeln.Datum
                } sonst wenn (['Zahl', 'Dezimal'].includes(theField.ControlType)) {
                    Rückgaberegeln.Nummer
                } anders {
                    Rückgaberegeln.Zeichenfolge
                }
            }
            Rückgabedaten
        },
        // Regeln hinzufügen addRule(data) {
            lass Regel = {
                Typ: 'Text',
                Filtertabelle: diese.ersteTabelle,
                Filterfeld: dieses.erstesFeld,
                Operator: '==',
                Filterwert: '',
            }
            data.rules.push(Regel)
        },
        // Regel löschen delRule(index) {
            diese.Daten.Regeln.splice(Index, 1)
        },
        // Gruppe hinzufügen addGroup(data) {
            lass Gruppe = {
                Bedingung: „ODER“,
                Regeln:
                    {
                        Typ: 'Text',
                        Filtertabelle: diese.ersteTabelle,
                        Filterfeld: '',
                        Betreiber: '',
                        Filterwert: '',
                    },
                ],
            }
            data.rules.push(Gruppe)
        },
        // Gruppe löschen delGroup(data, parent) {
            let index = parent.rules.findIndex((Element) => Element === Daten)
            übergeordnete Regeln.splice(Index, 1)
        },

2.5 Komponentennamen definieren

Die Komponente heißt CreateRule und der Definitionscode ist sehr einfach.

Standard exportieren {
    Name: "CreateRule",
    Requisiten: {
        übergeordnetes Element: {
            Typ: Objekt,
        },
        Daten: {
            Typ: Objekt,
        },
        Feldliste: {
            Typ: Array,
            Standard() {
                zurückkehren []
            },
        },
        Operatorliste: {
            Typ: Array,
            Standard() {
                zurückkehren []
            },
        },
    },
  }

3. Komponenten verwenden

Um Komponenten in Vue zu verwenden, referenzieren Sie sie einfach und fügen Sie sie der Komponentenliste hinzu.

importiere CreateRule aus „./CreateRule“
Standard exportieren {
    Name: 'NewRuleForm',
    Komponenten:
        Regel erstellen,
    },
}

Verweise auf Vorlagen hinzufügen

<Vorlage>
    <div Klasse="neue-Regel-Form">
        <Regel erstellen
            v-if="!wird geladen"
            :data="Daten"
            :fieldList="Filtertabelle"
            :operatorList="Operatorliste"
        ></RegelErstellen>
        <div v-if="!loading" class="discription-wrap" v-html="discription"></div>
    </div>
</Vorlage>

4. Effektanzeige

Dies ist die tatsächliche Auswirkung des Abfangens.

Bildbeschreibung hier einfügen

Es eignet sich in der Oberfläche gut als Suchkriterium oder Filterkriterium und lässt sich sehr flexibel einsetzen.

5. Zusammenfassung

Bei der Entwicklung von Vue-Anwendungen können wir auf einige Schnittstellen von Windows-Software zurückgreifen, die uns gelegentlich große Inspiration und Erleuchtung bringen können.

Dies ist das Ende dieses Artikels über die Implementierung von Komponenten zur dynamischen Abfrageregelgenerierung durch Vue. Weitere relevante Inhalte zu Komponenten zur dynamischen Abfrageregelgenerierung von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung der Vue-Komponente zum Abfragen von Daten nach Zeiträumen
  • Beispielcode für Fuzzy-Abfrage eines Vue-Eingabefelds
  • Vue implementiert die Fuzzy-Abfragemethode des Input-Eingabefelds
  • Vue.js implementiert die Paging-Abfragefunktion
  • Vue implementiert die Funktion, auf die Zeit zu klicken, um eine Zeitabfrage zu erhalten
  • Detailliertes Beispiel für eine Abfrageoperation in Vue.js
  • Verwenden des Vue.js-Frameworks zum Implementieren eines Abfragesystems für Zugfahrkarten (mit Quellcode)
  • Implementierung einer Paging-Abfragefunktion basierend auf vue.js
  • Beispielcode zur Implementierung einer Paging-Abfrage mit Bootstrap4 + Vue2
  • Vue+Element - benutzerdefinierte Abfragekomponente

<<:  Detaillierte Erklärung zur Verwendung von Docker-Compose-Befehlen

>>:  Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0

Artikel empfehlen

ReactRouter-Implementierung

ReactRouter-Implementierung ReactRouter ist die K...

Installation und Verwendung der MySQL MyCat-Middleware

1. Was ist mycat Ein vollständig Open Source-Groß...

HTML-Subtag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nich...

Kostenloses Tool zur Überprüfung der Richtigkeit von HTML-, CSS- und RSS-Feeds

Ein Trick zum Umgang mit dieser Art von Fehlern be...

So zeigen Sie Bilder im TIF-Format im Browser an

Der Browser zeigt Bilder im TIF-Format an Code kop...

Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage

Inhaltsverzeichnis Hintergrund Problembeschreibun...

Einfaches Docker Swarm-Tutorial

Schwarm drei virtuelle Maschinen 132,133,134 1. I...

Detaillierte Erklärung zur Verbindung mit einer MySQL-Datenbank mit Java in IntelliJ IDEA

1. MySQL-Datenbank herunterladen und installieren...

MySQL: MySQL-Funktionen

1. Integrierte Funktionen 1. Mathematische Funkti...

503 Dienst nicht verfügbar Fehlerlösungserklärung

1. Beim Öffnen der Webseite wird die Meldung „503...

Lösung für den MySQL-Fehler „Jede abgeleitete Tabelle muss einen eigenen Alias ​​haben“

MySQL meldet einen Fehler beim Ausführen einer Ab...

So dekomprimieren Sie mehrere Dateien mit dem Befehl „unzip“ in Linux

Lösung für das Problem, dass in Linux kein Entpac...

jQuery implementiert verschachtelte Tab-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.17 Winx64-Dekomprimierungsversion

In diesem Artikel wird die Installations- und Kon...

JavaScript-Entwurfsmuster, Lernadaptermuster

Inhaltsverzeichnis Überblick Code-Implementierung...