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

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5

Organisieren Sie die Tutorialnotizen zur Installa...

Zusammenfassung der Installation der grünen Version von MySQL5 unter Windows (empfohlen)

1. Laden Sie MySQL herunter Download-Adresse: htt...

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

Inhaltsverzeichnis 1. Einleitung 2. Implementieru...

So aktivieren Sie das langsame Abfrageprotokoll in MySQL

1.1 Einleitung Durch Aktivieren des Slow Query Lo...

Lösung zum Vergessen des MySQL-Passworts unter Linux

Das Problem ist folgendes: Ich habe den Befehl my...

Javascript zum Wechseln von Bildern per Mausklick

In diesem Artikelbeispiel wird der spezifische Ja...

Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen

Tomcat8-Image herunterladen [root@localhost ~]# D...

Reines js, um den Effekt eines Karussells zu erzielen

In diesem Artikel wird der spezifische Code von j...

So erstellen Sie schnell Ihren eigenen Server - ausführliches Tutorial (Java-Umgebung)

1. Kauf des Servers 1. Ich habe mich für den Serv...

Zusammenfassung der praktischen Methoden von CSS3 (empfohlen)

1. Abgerundeter Rand: CSS- CodeInhalt in die Zwis...

Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden

Ich habe kürzlich an einer Kommentarfunktion gear...

Docker-Grundlagen-Tutorial: Detaillierte Erklärung der Dockerfile-Syntax

Vorwort Dockerfile ist ein vom Docker-Programm in...

Zusammenfassung der Erfahrungen beim Website-Erstellen

<br />Welche Grundsätze sollten beachtet wer...

So verwenden Sie JavaScript zum Implementieren von Sortieralgorithmen

Inhaltsverzeichnis Blasensortierung Auswahl Sorti...

Lernen Sie, wie Sie mit vscode eine React-Native-Entwicklungsumgebung erstellen

Frage Der Code hat keine Eingabeaufforderung: Vie...