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
Detaillierte Erklärung der Zeit- und Datumsverarbeitung von moment.js
Konvertierung des Zeitformats von Montag auf Sonn...
Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen von Minio und Java SDK
Inhaltsverzeichnis 1minio ist einfach 2 Docker er...
Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)
Vorwort: Weil viele Geschäftstabellen Entwurfsmus...
Diagramm der Konfigurationsmethode für die installationsfreie Version von MySQL5.6 für Windows Server 2008 64-Bit
1 Laden Sie das komprimierte Paket der MySQL 5.6-...
Docker-Konfiguration Alibaba Cloud Image Acceleration Pull-Implementierung
Heute habe ich Docker verwendet, um das Image abz...
Informationen zur Bildlaufleiste in HTML/Bildlaufleiste entfernen
1. Die Farbe der Bildlaufleiste unter xhtml Im Ori...
Zusammenfassung der drei Phasen der Entwicklung eines visuellen Designers
Viele Leute haben dieses Buch gelesen: „Entwickel...
Beispiel für den Aufbau eines Redis-Sentinel-Clusters basierend auf Docker
1. Übersicht Redis Cluster ermöglicht hohe Verfüg...
Eine vollständige Erklärung der MySQL-Hochverfügbarkeitsarchitektur: MHA-Architektur
Inhaltsverzeichnis 1. Einleitung 2. Zusammensetzu...
Analyse des Projektverlaufs bei der Ideenverpackung und beim Hochladen in den Cloud-Dienst
eins. Zuerst müssen Sie es in eine Idee verpacken...
So zeigen Sie den Rahmen an, wenn td leer ist
Zuvor habe ich zusammengefasst, wie man mit CSS di...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.25
Das neueste Download- und Installationstutorial f...
So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven
Wir alle kennen die Drag-and-Drop-Funktion von HT...
Grundlegende Hinweise zu HTML (empfohlen)
1. Grundstruktur der Webseite: XML/HTML-CodeInhal...
Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode
Code kopieren Der Code lautet wie folgt: <HTML...