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)

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

Technik-Fan

JS importieren

Zusammenfassen

Sechs Methoden zur Nginx-Optimierung

Zusammenfassung und ausführliche Erläuterung der Docker-Container-Bedienungsanleitung

Detaillierte Erklärung der Lösung zur Bildverformung unter Flex-Layout

MySQL-Daemon konnte nicht gestartet werden – Fehlerlösung

Detailliertes Tutorial zum Upgrade der kostenlosen Installationsversion von MySQL 5.7.17 unter Windows (x86, 64 Bit)

HTML-Tutorial: Sortierte Listen

JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste

Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind

Zusammenfassung der Unterschiede zwischen HTML, SHHTML und XHTML

Implementierungscode zur Verwendung der MongoDB-Datenbank in Docker

Artikel empfehlen

Mehrere gängige Methoden zum Festlegen der Ankerpositionierung in HTML

Probleme und Lösungen bei der Nutzung der MySQL-Datenbanküberwachungssoftware Lepus

Anwendungsverschachtelung von HTML-ul-ungeordneten Tabellen

So installieren Sie MySQL über SSH auf einem CentOS VPS

Axios-Projekt mit 77,9 K GitHub-Repository: Welche Dinge sind es wert, gelernt zu werden?

Lösung zum Vergessen des Passworts bei der Installation von MySQL unter Linux/Mac

HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle

HTML-Selbststudium (I) Grundlegende Elemente und Attribute üben (Schreiben Sie Ihren eigenen Code)

So implementieren Sie die Kopierschutzfunktion für Webseiten (mit der Cracking-Methode)

Datums- und Zeitkomponente des WeChat-Applets (Jahr, Monat, Tag, Stunde und Minute)

Detaillierte Erläuterung der MySQL-Indexprinzipien und -Optimierung

Zusammenfassung der Verwendung von Linux-SFTP-Befehlen

So stellen Sie per SSH eine Verbindung zum Docker-Server her

Häufige Tomcat-Ausnahmen und Lösungscodebeispiele

Detaillierte Erklärung der jQuery-Kettenaufrufe