Element Tabelle Tabellenkomponente Mehrfeld (Mehrspalten) Sortiermethode

Element Tabelle Tabellenkomponente Mehrfeld (Mehrspalten) Sortiermethode

brauchen:

Um mehrere Spalten in der Elementtabelle zu sortieren, klicken Sie auf die Datumssortierung, dann auf die Namenssortierung und übergeben Sie die beiden Sortierfelder zum Sortieren an das Backend.

Aufgetretene Probleme:

Die Tabellenkomponente des Elements unterstützt nur die Sortierung einer einzelnen Spalte. Wenn Sie auf die Sortierung einer anderen Spalte klicken, wird die vorherige Sortierung automatisch aufgehoben. Ich habe online nach Methoden gesucht und diesen Artikel gefunden, der vorschlug, :header-cell-class-name und @sort-change zu verwenden, um das Stilproblem der Sortierung mehrerer Spalten zu lösen. Ich habe es lange versucht und festgestellt, dass das Sort-Change-Ereignis beim Abbrechen der Sortierung null zurückgab, sodass ich nicht herausfinden konnte, welche Spalte die Sortierung abgebrochen hat. Kurz gesagt, das Problem konnte nicht gelöst werden, indem man sich auf Elementtabellenereignisse verließ.

lösen:

Durch die Anpassung der Kopfzeile fügen Sie die beiden kleinen Symbole direkt in die Kopfzeile ein. Binden Sie dann die Klicksortierungsereignisse entsprechend ein. Auf diese Weise können wir sowohl den Sortierstatus (aufsteigend, absteigend, unsortiert) als auch den sortierten Spaltennamen erhalten. An dieser Stelle sollten die Leser verstehen, dass sich der spezifische Code im Intranet befindet und es nicht einfach ist, ihn einzufügen. Wenn Sie Fragen haben, kommentieren Sie bitte und ich werde mein Bestes geben, um zu antworten ~

Dies ist das Ende dieses Artikels über die Sortiermethode für mehrere Felder (mehrere Spalten) der Elementkomponente „Tabelle“. Weitere relevante Inhalte zur Sortierung für mehrere Felder des Elements „Tabelle“ 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:
  • Lösen Sie das Problem der gemischten Sortierung von Zahlen, Buchstaben und Chinesisch in der Tabelle in Vue ElementUI
  • Elementui-Tabellenkomponente + sortablejs zum Implementieren von Beispielcode für die Zeilensortierung per Drag & Drop
  • Vue-Elementtabelle Tabellenanforderung Hintergrundsortiermethode
  • Verwenden Sie jQuery.sortElements, um die Tabelle zu sortieren

<<:  So verbinden Sie die Idee mit Docker, um eine Bereitstellung mit einem Klick zu erreichen

>>:  Rückgängigmachen der Anmeldung in MySQL

Artikel empfehlen

Tipps zur Verwendung des Befehls „Docker Inspect“

Beschreibung und Einführung Docker Inspect ist ei...

Javascript Blob-Objekt zum Erzielen eines Dateidownloads

Inhaltsverzeichnis veranschaulichen 1. Blob-Objek...

Was macht der legendäre VUE-Syntax-Sugar?

Inhaltsverzeichnis 1. Was ist syntaktischer Zucke...

HTML+CSS zum Erstellen eines Dropdown-Menüs

1. Beispiel einer Dropdown-Liste Der Code lautet ...

MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten

Problembeschreibung: Struktur: test hat zwei Feld...

Detaillierte Erläuterung des Mysql-Kommunikationsprotokolls

1.Mysql-Verbindungsmethode Um das MySQL-Kommunika...

Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe

1. Grundlegende Einführung in die Linux-Gruppe Un...

Beispiel für den schnellen Aufbau einer LEMP-Umgebung mit Docker

LEMP (Linux + Nginx + MySQL + PHP) ist heutzutage...

Dieser Artikel hilft Ihnen, den Quellcode von PReact10.5.13 zu verstehen

Inhaltsverzeichnis render.js-Teil create-context....

Grafisches Tutorial zur Installation und Konfiguration von CentOS 7

In diesem Artikel wird das ausführliche Installat...

Verwenden von JS zum Implementieren eines einfachen Rechners

Verwenden Sie JS, um einen einfachen Rechner für ...

MySQL Serie 3 Grundlagen

Inhaltsverzeichnis Tutorial-Reihe 1. Einführung i...

Implementierung der One-Click-TLS-Verschlüsselung für die Docker-Remote-API

Inhaltsverzeichnis 1. Ändern Sie den Port 2375 vo...

CentOS7 verwendet RPM, um MySQL 5.7-Tutorialdiagramm zu installieren

1. Laden Sie 4 RPM-Pakete herunter mysql-communit...