Fügen Sie eine schwebende Eingabeaufforderung für das Kopfzeilensymbol in der ElementUI-Tabelle hinzu

Fügen Sie eine schwebende Eingabeaufforderung für das Kopfzeilensymbol in der ElementUI-Tabelle hinzu

In diesem Artikel wird hauptsächlich erläutert, wie Sie schwebende Eingabeaufforderungen zu Kopfzeilensymbolen in ElementUI-Tabellen hinzufügen, und es wird mit Ihnen geteilt. Die Einzelheiten lauten wie folgt:

Bildbeschreibung hier einfügen

<el-table-column
    Bezeichnung = "Vorgang"
    fest="richtig"
    :render-header="Tabellenaktion"
    Breite="120">
    <!--scope ist userList scope.row sind die aktuellen Zeilendaten-->
    <template slot-scope="Umfang">
        <el-button @click="editCar(scope.row)" Typ="primary" Icon="el-icon-edit" Größe="klein" Kreis></el-button>
        <el-button @click="delCar(scope.row.carId)" Typ="Gefahr"
                   Symbol="el-icon-delete" Kreisgröße="klein"></el-button>
    </Vorlage>
</el-Tabellenspalte>
 //Eingabeaufforderung für Tabellenoperationen tableAction() {
     gib dies zurück.$createElement('HelpHint', {
         Requisiten: {
             Inhalt: 'Fahrzeug bearbeiten/Fahrzeug löschen'
         }
     }, 'bedienen');
 },

Denken Sie daran, zu importieren

HelpHint aus „~/components/HelpHint/HelpHint.vue“ importieren;

Und führen Sie es in Komponenten ein

Inhalt der HelpHint.vue-Komponente

<Vorlage>
  <span>
    <span style="margin-right: 8px"><Steckplatz></Steckplatz></span>
    <el-tooltip :content="Inhalt" :placement="Platzierung">
      <i class="el-icon-question" style="cursor: pointer;"></i>
    </el-tooltip>
  </span>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: 'HelpHint',
    Requisiten: {
      Platzierung:
        Standard: „oben“
      },
      Inhalt: String,
    },
    Daten() {
      zurückkehren {}
    },
  }
</Skript>

Dies ist das Ende dieses Artikels über das Hinzufügen schwebender Eingabeaufforderungen für Kopfzeilensymbole in ElementUI-Tabellen. Weitere relevante schwebende Eingabeaufforderungen für Elementsymbole finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten stehenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Verwenden Sie vue2+elementui für Hover-Prompts
  • Die Validierung der Vue-Element-Benutzeroberfläche löst aktiv einen Fehleraufforderungsvorgang aus.
  • Beispiel für die Verwendung der Texteingabeaufforderung für Element-Tooltips
  • Vue implementiert die Header-Informationsaufforderungsfunktion in der Elementtabelle (empfohlen)
  • Mit Vue kombiniertes Element, um das Problem der Fehlermeldung zu lösen, wenn bei der Formularvalidierung ein Wert vorhanden ist

<<:  SQL zur Implementierung der Wiederherstellung einer Zeitreihenversetzung

>>:  CSS3 realisiert eine springende Ballanimation

Artikel empfehlen

So konfigurieren Sie pseudostatisches und clientadaptives Nginx

Das Backend verwendet das Framework thinkphp3.2.3...

Tutorial-Analyse der Schnellinstallation von mysql5.7 basierend auf centos7

eins. wget https://dev.mysql.com/get/mysql57-comm...

JavaScript zum Erreichen der Produktabfragefunktion

In diesem Artikelbeispiel wird der spezifische Ja...

Analyse des Prinzips des Rabbitmq Heartbea-Herzschlagerkennungsmechanismus

Vorwort Wenn Sie RabbitMQ verwenden und für einen...

Das WeChat-Applet realisiert ein Verknüpfungsmenü

Um das Kursdesign zu realisieren, habe ich kürzli...

Beispieloperation für die Summe des Mysql-Varchar-Typs

Einige Freunde haben beim Erlernen von Datenbanke...

Optimierungsmethoden, wenn MySQL zu viel CPU beansprucht (unbedingt lesen)

Wenn MySQL zu viel CPU beansprucht, wo sollten wi...

So verhindern Sie Event-Bubbling in JavaScript

Wir müssen darauf achten, dass die Eigenschaften ...

Javascript zum Wechseln von Bildern per Mausklick

In diesem Artikelbeispiel wird der spezifische Ja...

Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign

Im Zuge des schrittweisen Übergangs von herkömmli...

Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion

Durch Aktivieren der Papierkorbfunktion können Si...

Kostenlose Installationskonfigurationsmethode für MySQL 5.7.18 WinX64

1. Herunterladen 2. Dekompression 3. Fügen Sie di...