Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben

Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben

Technik-Fan

  • html-Webseite, müssen Sie wissen
  • Von Youyou entwickeltes Vue-Frontend-Framework
  • Front-End-Benutzeroberfläche des Element Takeaway-Teams

Fügen Sie dies unter dem <title> -Tag Ihrer Webseite hinzu

<!-- Stil importieren -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

JS importieren

Fügen Sie unter html <body> hinzu

<!-- Entwicklungsversion, einschließlich hilfreicher Befehlszeilenwarnungen -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Komponentenbibliothek importieren-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Dateiquelle

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <!-- Stil importieren -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</Kopf>
<Text>

<div id="app">
    <h1>{{ Nachricht }}</h1>
    <!-- <Vorlage>-->
    <el-Tabelle
            :data="Tabellendaten"
            Grenze
            Stil="Breite: 100%">
        <el-table-column
                behoben
                prop="Datum"
                Bezeichnung="Datum"
                Breite="150">
        </el-Tabellenspalte>
        <el-table-column
                Eigenschaft = "Name"
                Bezeichnung="Name"
                Breite="120">
        </el-Tabellenspalte>
        <el-table-column
                prop="Provinz"
                label="Provinz"
                Breite="120">
        </el-Tabellenspalte>
        <el-table-column
                prop="Stadt"
                label="Stadtgebiet"
                Breite="120">
        </el-Tabellenspalte>
        <el-table-column
                prop="Adresse"
                label="Adresse"
                Breite="300">
        </el-Tabellenspalte>
        <el-table-column
                prop="zip"
                label="Postleitzahl"
                Breite="120">
        </el-Tabellenspalte>
        <el-table-column
                fest="richtig"
                Bezeichnung = "Vorgang"
                Breite="100">
            <template slot-scope="Umfang">
                <el-button @click="handleClick(scope.row)" type="text" size="small">Anzeigen</el-button>
                <el-button type="text" size="small">Bearbeiten</el-button>
            </Vorlage>
        </el-Tabellenspalte>
    </el-Tabelle>
    <!-- </template>-->
</div>
<!-- Entwicklungsversion, einschließlich hilfreicher Befehlszeilenwarnungen -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Komponentenbibliothek importieren-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<Skripttyp="text/javascript">
    var app = new Vue({
        el: '#app',
        Daten: {
            Nachricht: 'Hallo Vue!',
            Tabellendaten: [{
                Datum: '2016-05-02',
                Name: 'Wang Xiaohu',
                Provinz: 'Shanghai',
                Stadt: 'Putuo District',
                Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                PLZ: 200333
            }, {
                Datum: '2016-05-04',
                Name: 'Wang Xiaohu',
                Provinz: 'Shanghai',
                Stadt: 'Putuo District',
                Adresse: „Nr. 1517, Jinshajiang Road, Putuo District, Shanghai“,
                PLZ: 200333
            }, {
                Datum: '2016-05-01',
                Name: 'Wang Xiaohu',
                Provinz: 'Shanghai',
                Stadt: 'Putuo District',
                Adresse: „Nr. 1519, Jinshajiang Road, Putuo District, Shanghai“,
                PLZ: 200333
            }, {
                Datum: '2016-05-03',
                Name: 'Wang Xiaohu',
                Provinz: 'Shanghai',
                Stadt: 'Putuo District',
                Adresse: „Nr. 1516, Jinshajiang Road, Putuo District, Shanghai“,
                PLZ: 200333
            }]
        }
    });
</Skript>
</body>
</html>

Wirkung

Bildbeschreibung hier einfügen

Zusammenfassen

Gehen Sie zu https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html, kopieren Sie den Quellcode und führen Sie ihn aus.
So führen Sie es aus <br /> Kopieren Sie es und drücken Sie ctrl+s zum Speichern. Klicken Sie dann im kleinen Fenster rechts auf „Aktualisieren“.
Element-Benutzeroberfläche
https://element.eleme.cn/#/zh-CN/component/table
Es gibt viele Komponenten. Wenn Sie diese verwenden möchten,照葫蘆畫瓢einfach der Tabelle oben.

Dies ist das Ende dieses Artikels darüber, wie Sie die reibungslose Funktionsweise von HTML+Vue+Element-UI in einer Minute erleben können. Weitere verwandte Inhalte zu HTML Vue Element-UI finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Informationen zum CSS-Floating und zum Aufheben des Floatings

>>:  Detaillierte Erläuterung der Rolle von overflow:hidden (Überlauf verbergen, Floats löschen, Randkollaps beheben)

Artikel empfehlen

So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn

Mit den richtigen Einstellungen können Sie Linux-...

So setzen Sie das Root-Passwort von Mysql in Windows zurück, wenn Sie es vergessen haben

Meine Maschinenumgebung: Windows 2008 R2 MySQL 5....

Vue + Element realisiert Paging-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

MySQL 8.0.19 unterstützt die Sperrung eines Kontos nach dreimaliger Eingabe eines falschen Passworts (Beispiel)

MySQL 8.0.19 unterstützt die Sperrung des Kontos ...

Beispiel für utf8mb4-Sortierung in MySQL

Allgemeine utf8mb4-Sortierregeln in MySQL sind: u...

Lassen Sie den IE CSS3 Media Query unterstützen, um responsives Webdesign zu erreichen

Die heutigen Bildschirmauflösungen reichen von 32...

jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln

Dieses Artikelbeispiel teilt den spezifischen Cod...

So erhalten Sie ein dauerhaftes kostenloses SSL-Zertifikat von Let’s Encrypt in Docker

1. Ursache Der offizielle Cerbot ist zu nervig. E...

Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/Telefongeräte

Vorwort Heutzutage gibt es viele Geräte, darunter...

So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server

Inhaltsverzeichnis Hintergrund erreichen Ergänzun...

Drei Möglichkeiten zum Aktualisieren von Iframes

Code kopieren Der Code lautet wie folgt: <ifra...

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Routenplanung vue-router4 behält den Großteil der...

UTF-8- und GB2312-Webkodierung

In letzter Zeit haben mich viele Studenten zur Ko...

Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker

Vor Kurzem musste ich die Zoom-Videokonferenz tes...

Zusammenfassung gängiger Befehle für Ubuntu-Server

Die meisten der folgenden Befehle müssen in der K...