Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile
EffektanzeigeSchau erstmal, ob das der gewünschte Effekt ist^_^
Wie in der Abbildung gezeigt, ist eine Tabelle im ElementUI-Formular verschachtelt. Jede Zeile in der Tabelle kann Vorgänge wie [Speichern], [Hinzufügen], [Bearbeiten], [Löschen] und [Zurücksetzen] ausführen. Gleichzeitig können bestimmte Felder in jeder Zeile überprüft werden (anstatt des gesamten Formulars!). Diese Anforderung ist sehr häufig und wird daher aufgezeichnet. Code-LinkGitee Adresse SchlüsselcodeTabellarische Daten // Das Datenformat muss [Objekt verschachteltes Array] sein, [Formular] bindet an Formular, [Liste] bindet an Tabellenformular: {
// Tabellendatenliste: [
{ id: 1, name: 'Xiaoye', age: '12', phone: '123456', show: true },
{ ID: 2, Name: ‚Xiao Li‘, Alter: ‚23‘, Telefon: ‚123457‘, anzeigen: true },
{ ID: 3, Name: '小林', Alter: '12', Telefon: '123458', anzeigen: true }
]
},
Komponentenschachtelung
// Das Formular muss außerhalb der Tabelle verschachtelt sein und das Formular muss an das Attribut [rules] [ref] gebunden sein <el-form :model="form" :rules="rules" ref="form">
<el-table :data="formular.liste">
<el-table-column prop="Name" label="Name">
<Vorlage Umfang="Umfang">
// Jedes Feld ist dynamisch an die [prop] [rules]-Attribute des Formulars gebunden <el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name">
<el-input size="mini" v-model="scope.row.name" placeholder="Bitte geben Sie ein" löschbar></el-input>
</el-form-item>
</Vorlage>
</el-Tabellenspalte>
</el-Tabelle>
</el-form>
Überprüfungsmethode
// Methode zur Formularvalidierung // [form] ist das Formular, das validiert werden muss, d. h. das Feld, das im Formular an [ref] gebunden ist // [index] ist die Anzahl der Zeilen, die übergeben werden müssen, Feld [scope.$index]
validateField(Formular, Index) {
lass Ergebnis = wahr;
für (let item of this.$refs[form].fields) {
wenn(item.prop.split(".")[1] == index){
dies.$refs[form].validateField(item.prop, err => {
wenn(err !="") {
Ergebnis = falsch;
}
});
}
wenn(!Ergebnis) abbrechen;
}
Ergebnis zurückgeben;
}
Reset-Methode // Setzt die Formularfelder zurück, die überprüft werden müssen // Die Parameter sind dieselben wie bei der Überprüfungsmethode. Wenn alle Felder zurückgesetzt sind, reset(form, index) {
dies.$refs[form].fields.forEach(item => {
wenn(item.prop.split(".")[1] == index){
} item.resetField();
}
})
}
// Wenn Sie alle Felder zurücksetzen müssen, können Sie die Felder direkt im Formular steuern // [Zeile] sind die in jeder Zeile übergebenen Daten resetRow(Zeile) {
Zeile.name = "";
Zeile.Alter = "";
Zeile.Telefon = "";
}
Vollständiger CodeDa es sich um einen Online-Link handelt, kann es sein, dass die Seite bei instabilem Netzwerk nicht geladen wird. Sie können bei der Nutzung auf einen lokalen Link wechseln! <!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Vue-Formular: Zeilenweise Validierung verschachtelter Tabellen</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Stil importieren -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="externes nofollow" >
<!-- Komponentenbibliothek importieren-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</Kopf>
<Text>
<div id="app">
<!-- Seitenkomponenten -->
<h2 style="text-align: center; line-height: 23px;color: #909399;">Zeilenweise Überprüfung verschachtelter Tabellen im Vue-Formular</h2>
<el-form :model="form" :rules="Regeln" ref="form" :inline="true"
Stil = "Rand: 23px auto 0px; Breite: 96 %; Überlauf: versteckt;">
<el-table border :data="formular.liste">
<el-table-column align="center" prop="id" label="Seriennummer" width="55">
</el-Tabellenspalte>
<el-table-column align="center" prop="name" label="Name">
<Vorlage Umfang="Umfang">
<el-form-item :prop="'Liste.' + Umfang.$index + '.name'" :rules="Regeln.name"
v-if="Umfang.Zeile.Anzeige">
<el-input size="mini" v-model="scope.row.name" placeholder="Bitte eingeben" löschbar>
</el-Eingabe>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.name}}</div>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" prop="Alter" label="Alter">
<Vorlage Umfang="Umfang">
<el-form-item :prop="'Liste.' + Umfang.$index + '.Alter'" :rules="Regeln.Alter" v-if="Umfang.Zeilen.zeigen">
<el-input size="mini" v-model="scope.row.age" placeholder="Bitte eingeben" löschbar>
</el-Eingabe>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.age}}</div>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" prop="phone" label="Kontaktinformationen">
<Vorlage Umfang="Umfang">
<el-form-item :prop="'Liste.' + scope.$index + '.phone'" :rules="Regeln.phone"
v-if="Umfang.Zeile.Anzeige">
<!-- <el-form-item v-if="scope.row.show"> -->
<el-input size="mini" v-model="scope.row.phone" placeholder="Bitte eingeben" löschbar>
</el-Eingabe>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.phone}}</div>
</Vorlage>
</el-Tabellenspalte>
<el-table-column label="operation" align="center" width="290" fixed="right">
<template slot-scope="Umfang">
<el-button Typ="Text" Stil="Farbe: #E6A23C;" @click="Speichern(Bereich.$index, Bereich.row)"
v-if="scope.row.show" icon="el-icon-check">Speichern</el-button>
<el-button Typ="Text" Stil="Farbe: #409EFF;" @click="Bearbeiten(Bereich.Zeile)" v-if="!Bereich.Zeile.Anzeigen"
icon="el-icon-edit">Bearbeiten</el-button>
<el-button Typ="Text" Stil="Farbe: #67C23A;" v-if="Bereich.$index+1 == Listenlänge"
@click="addRow(scope.$index, scope.row)" icon="el-icon-plus">Hinzufügen</el-button>
<el-button Typ="Text" Stil="Farbe: #F56C6C;" @click="delRow(scope.$index, scope.row)"
icon="el-icon-delete">Löschen</el-button>
<el-button Typ="Text" Stil="Farbe: #909399;" @click="reset('Formular', Umfang.$index)"
v-if="scope.row.show" icon="el-icon-refresh">Zurücksetzen</el-button>
<!-- <el-button Typ="Text" Stil="Farbe: #909399;" @click="resetRow(scope.row)"
v-if="scope.row.show" icon="el-icon-refresh">Zurücksetzen</el-button> -->
</Vorlage>
</el-Tabellenspalte>
</el-Tabelle>
</el-form>
</div>
</body>
</html>
<Skript>
var app = new Vue({
el: '#app',
Daten() {
zurückkehren {
// Formulardaten Formular: {
// Tabellendatenliste: [{ id: 1, name: '', age: '', phone: '', show: true }]
},
// Formularvalidierungsregeln: {
Name: [{ erforderlich: true, Nachricht: ‚Bitte geben Sie Ihren Namen ein! ', Auslöser: 'Unschärfe' }],
Alter: [{ erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Alter ein! ', Auslöser: 'Unschärfe' }],
Telefon: [{ erforderlich: true, Nachricht: ‚Bitte geben Sie Ihre Kontaktinformationen ein! ', Auslöser: 'Unschärfe' }],
},
// Die Standardtabellenlänge ist 1
Listenlänge: 1,
}
},
Methoden: {
// ValidierenvalidierenFeld(Formular, Index) {
lass Ergebnis = wahr;
für (let item of this.$refs[form].fields) {
wenn (item.prop.split(".")[1] == index) {
dies.$refs[form].validateField(item.prop, err => {
wenn (err != "") {
Ergebnis = falsch;
}
});
}
wenn (!Ergebnis) abbrechen;
}
Ergebnis zurückgeben;
},
// Zurücksetzen [nur für Validierungsfelder]
zurücksetzen(Formular, Index) {
dies.$refs[form].fields.forEach(item => {
wenn (item.prop.split(".")[1] == index) {
} item.resetField();
}
})
},
// Zurücksetzen [alles]
Zeile zurücksetzen(Zeile) {
Zeile.name = "";
Zeile.Alter = "";
Zeile.Telefon = "";
},
// Speichern save(index, row) {
wenn (!this.validateField('form', index)) return;
Zeile.anzeigen = falsch;
},
// Hinzufügen addRow(index, row) {
wenn (!this.validateField('form', index)) return;
dieses.Formular.Liste.push({
ID: Index + 2,
Name: '',
Alter: '',
Telefon: '',
zeigen: wahr
});
diese.Listenlänge = diese.Formular.Listenlänge;
},
// Bearbeiten edit(row) {
Zeile.anzeigen = wahr;
},
// Löschen delRow(index, row) {
wenn (diese.Form.Liste.Länge > 1) {
diese.Form.Liste.splice(Index, 1);
diese.Listenlänge = diese.Formular.Listenlänge;
} anders {
diese.form.list = [{
ID: 1,
Name: '',
Alter: '',
Telefon: '',
zeigen: wahr
}];
}
},
}
})
</Skript>ZusammenfassenDies ist das Ende dieses Artikels über die verschachtelte Tabelle des Vue-ElementUI-Formulars und die Überprüfung jeder Zeile. Weitere relevante Inhalte für die verschachtelte Tabelle des ElementUI-Formulars finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung mehrerer cleverer Anwendungen von position:sticky sticky positioning
>>: Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung
Artikel empfehlen
JavaScript implementiert die Anzeige einer Dropdown-Box, wenn die Maus darüber bewegt wird
In diesem Artikel wird der spezifische JavaScript...
Mysql-String-Abfangen und Abrufen von Daten im angegebenen String
Vorwort: Ich bin auf die Anforderung gestoßen, be...
Reines CSS, um coole Neonlichteffekte zu erzielen (mit Demo)
Ich habe kürzlich die Tutorial-Reihe zu CSS-Anima...
Parameter, um Iframe transparent zu machen
<iframe src="./ads_top_tian.html" all...
Zehn nützliche und einfache MySQL-Funktionen
Funktion 0. Aktuelle Uhrzeit anzeigen Befehl: sel...
Vue implementiert einen visuellen Drag-Page-Editor
Inhaltsverzeichnis Drag & Drop-Implementierun...
Javascript-Countdown-Eingabeaufforderungsfeld
In diesem Artikelbeispiel wird der spezifische Ja...
Webdesign-Tipps für Formular-Eingabefelder
1. Gestricheltes Feld, wenn die Abbrechen-Schaltfl...
HTML-Tabellen-Markup-Tutorial (38): Rahmenfarben-Attribut der Kopfzeile BORDERCOLOR
Um die Tabelle zu verschönern, können Sie für die...
Detaillierte Erklärung der HTML-Dokumenttypen
Meines ist: <!DOCTYPE html> Blog-Garten: &l...
Was sind Web Slices?
Neue Funktion von IE8: Web Slices (Web Slices) Mi...
So lösen Sie das Problem „Nginx 503-Dienst vorübergehend nicht verfügbar“
In letzter Zeit tritt nach dem Aktualisieren der ...
Vergleich verschiedener Möglichkeiten zur Messung der Leistung von JavaScript-Funktionen
Inhaltsverzeichnis Überblick Leistung.jetzt Konso...
Tutorial zur HTML-Tabellenauszeichnung (15): Tabellentitel
<br />Mit diesem Tag können Sie direkt einen...
Zusammenfassung der 11 häufigsten Fehler von MySQL-Anfängern
Vorwort Sie erhalten möglicherweise häufig Warn-E...