So implementieren Sie mehrere Parameter in el-dropdown in ElementUI

So implementieren Sie mehrere Parameter in el-dropdown in ElementUI

Aufgrund der zunehmenden Anzahl von Schaltflächen im Unternehmen gibt es in letzter Zeit zu viele Schaltflächen im Seitenlayout, die Seite ist nicht schön genug und die Benutzererfahrung ist nicht gut. Daher dachte ich daran, el-dropdown zu verwenden, um eine Dropdown-Schaltfläche zu erstellen (mehrere Schaltflächen zusammen zu integrieren und Dropdown zu implementieren).

Bildbeschreibung hier einfügen

Die handleCommand-Methode in der offiziellen ElementUi-Dokumentation erlaubt jedoch nur die Übergabe eines Parameters, der verwendet wird, um auszulösen, welche Option Sie ausgewählt haben. In der Praxis müssen wir auch ein Objekt mit der aktuellen Zeilennummer übergeben (wenn Sie wie ich eine Tabelle zum Anzeigen von Daten verwenden) und dann einige Felder dieses Objekts verwenden, um es für einige Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge an den Hintergrund zu übergeben.

Das Beispiel für el-dropdown im offiziellen Dokument von ElementUi lautet wie folgt:
Offizielle el-dropdown-Dokumentation

<el-dropdown @command="Befehlshandle">
  <span class="el-dropdown-link">
    Dropdown-Menü<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="Dropdown">
    <el-dropdown-item command="a">Goldener Kuchen</el-dropdown-item>
    <el-dropdown-item command="b">Löwenkopf</el-dropdown-item>
    <el-dropdown-item command="c">Schneckenreisnudeln</el-dropdown-item>
    <el-dropdown-item command="d" disabled>Doppelhautmilch</el-dropdown-item>
    <el-dropdown-item command="e" divided>Austern-Omelett</el-dropdown-item>
  </el-Dropdown-Menü>
</el-dropdown>

<Stil>
  .el-Dropdown-Link {
    Cursor: Zeiger;
    Farbe: #409EFF;
  }
  .el-Symbol-Pfeil nach unten {
    Schriftgröße: 12px;
  }
</Stil>

<Skript>
  Standard exportieren {
    Methoden: {
      handleCommand(Befehl) {
        this.$message('Auf Element klicken ' + Befehl);
      }
    }
  }
</Skript>

Wir müssen den Befehlsparameter vor der Ausführung der Methode handleCommand in ein Objekt neu verpacken, damit es die gewünschten Daten für spätere Aufrufe enthält.

Der Code lautet wie folgt:

<el-table-column label="Vorgang 1">
    <template slot-scope="Umfang">
        <el-dropdown split-button type="primary" @command="handleCommand">
            Andere Operationen <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">Aufgegeben</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">Original hochladen</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">Ursprüngliche Anordnung</el-dropdown-item>
                <el-dropdown-item deaktiviert :command="beforeHandleCommand(scope.$index, scope.row,'d')">Einfrieren</el-dropdown-item>
                <el-dropdown-item deaktiviert :command="beforeHandleCommand(scope.$index, scope.row,'e')">Aufheben</el-dropdown-item>
            </el-Dropdown-Menü>
        </el-dropdown>
    </Vorlage>
</el-Tabellenspalte>

Da wir es in eine Tabelle schreiben, benötigen wir einen Slot und können je nach tatsächlicher Situation spezifische Änderungen vornehmen. Binden Sie eine Methode an das Befehlsattribut des Tags. Diese Methode kann die gewünschten Parameter übergeben. Verwenden Sie diese Methode dann, um sie in ein Objekt zu kapseln, und übergeben Sie dieses Objekt dann an die Methode handleCommand.

<Skript>
Standard exportieren {
    Methoden: {
        handleAbandon(index, zeile) {
           //zu tun
        },
        handleUpload (Index, Zeile) {
            //zu tun
        },
        handleSettle(Index, Zeile){
           //zu tun   
        },
        vorHandleCommand(Index, Zeile, Befehl){
            zurückkehren {
                'index': Index,
                'Zeile': Zeile,
                'Befehl':Befehl
            }
        },
        handleCommand(Befehl) {
            Schalter (Befehl.Befehl) {
                Fall "a"://aufgeben.handleAbandon(Befehl.index, Befehl.zeile);
                    brechen;
                Fall "b"://Laden Sie das Original hoch this.handleUpload (command.index, command.row);
                    brechen;
                Fall "c"://Ursprüngliche Anordnung this.handleSettle(command.index,command.row);
                    brechen;
            }
        }
    },
}
</Skript>

Dies ist das Ende dieses Artikels über die Implementierung mehrerer Parameter von el-dropdown in ElementUI. Weitere Informationen zum Übergeben mehrerer Parameter von el-dropdown in ElementUI finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • vue+element erstellt eine kleine Zusammenfassung der Hintergrund-Dropdown-Funktion el-dropdown

<<:  Detaillierte Erläuterung der Kommentare zu gespeicherten MySQL-Prozeduren

>>:  Implementierungsbeispiel für die Docker-Bereitstellung von Front-End- und Back-End-Trennprojekten

Artikel empfehlen

So aktualisieren Sie v-for in Vue

Tipps: Die Methode zur Array-Änderung führt zur A...

Django2.* + Mysql5.7-Entwicklungsumgebung Integrations-Tutorial-Diagramm

Umfeld: MAC_OS 10.12 Python 3.6 MySQL 5.7.25 Djan...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7

In diesem Tutorial erfahren Sie alles über die In...

Detaillierte Einführung und Verwendungsbeispiele für Map-Tag-Parameter

Karten-Tags müssen paarweise vorkommen, d. h. <...

So deaktivieren Sie Webseitenstile mit dem Webentwickler von Firefox

Voraussetzung: Das Webentwickler-Plugin wurde inst...

So zeigen Sie die IP-Adresse von Linux in einer virtuellen VMware-Maschine an

1. Doppelklicken Sie zunächst auf das VMware-Symb...

CentOS-System-RPM-Installation und -Konfiguration von Nginx

Inhaltsverzeichnis CentOS RPM-Installation und Ko...

Über die MariaDB-Datenbank unter Linux

Inhaltsverzeichnis Über die MariaDB-Datenbank unt...

Tiefgreifendes Verständnis der logischen Architektur von MySQL

MySQL ist heute die Datenbank, die von den meiste...

Vue implementiert eine kleine Countdown-Funktion

In vielen Projekten muss eine Countdown-Funktion ...

Das Front-End muss wissen, wie Bilder verzögert geladen werden (drei Methoden)

Inhaltsverzeichnis 1. Was ist Lazy Loading? 2. Im...