Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben
Technik-Fan
Fügen Sie dies unter dem <!-- Stil importieren --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> JS importieren Fügen Sie unter <!-- 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
Zusammenfassen Gehen Sie zu https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html, kopieren Sie den Quellcode und führen Sie ihn aus. 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
Artikel empfehlen
Ein Artikel bringt Ihnen die Vererbung von JS-Funktionen bei
Inhaltsverzeichnis 1. Einleitung: 2. Vererbung de...
Zusammenfassung der HTML-Hack-Tags im IE-Browser
Code kopieren Der Code lautet wie folgt: <!--[...
Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil
Aufgrund der Anforderungen des Projekts habe ich ...
So stellen Sie über Navicat eine Remoteverbindung zu MySQL her
Wenn Sie Navicat direkt für die Verbindung über I...
NULL und leere Zeichenfolge in MySQL
Ich bin vor kurzem mit MySQL in Berührung gekomme...
Zusammenfassung von drei Möglichkeiten zum Implementieren von Rankings in MySQL ohne Verwendung von „order by“
Übernahme des Geschäfts: Sehen Sie sich die Gehal...
Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang
Vorwort Golang stellt das Datenbank-/SQL-Paket fü...
Detaillierte Erläuterung mehrerer Möglichkeiten zum Schreiben privater Variablen der ES6-Implementierungsklasse
Closure-Implementierung privater Variablen Privat...
Detaillierte Erläuterung des CocosCreator-Projektstrukturmechanismus
Inhaltsverzeichnis 1. Projektordnerstruktur 1. As...
Importieren Sie die CSV-Datei mit Navicat in MySQL
In diesem Artikel wird der spezifische Code zum I...
Lösung für das Problem, dass die InnoDB-Engine beim Starten von MySQL deaktiviert wird
Finden Sie das Problem Als ich heute bei der Arbe...
Wie kompliziert ist die Priorität von CSS-Stilen?
Gestern Abend habe ich mir eine Interviewfrage ang...
So stellen Sie ein Vue-Projekt mit Docker-Image + nginx bereit
1. Vue-Projekt verpacken Geben Sie den folgenden ...
Über die Rolle von Metadaten in HTML (aus dem Internet gesammelt und sortiert)
W3Cschool erklärt es so Das <meta>-Element l...
Detailliertes Installationstutorial für MySQL 5.7.11 unter Win7
Betriebssystem: Win7 64-Bit Ultimate Edition Komp...