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
Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen
Das Div+CSS-Layout zur Erzielung einer 2-Enden-Au...
So fügen Sie eine Popup-Aktionsschaltfläche unten für „Select“ und „Cascader“ von Element-UI hinzu
Wie in der folgenden Abbildung dargestellt, ist e...
Einführung in die Verwendung von window.open, einem Sprungmenü, das in einem neuen Fenster geöffnet wird
Code kopieren Der Code lautet wie folgt: <vor&...
Detaillierte Erklärung des Parsererror-Fehlerfalls in der JavaScript-Lösung in Ajax
Die ultimative Methode zur Lösung des Ajax-Parser...
So verwenden Sie Volume zum Übertragen von Dateien zwischen Host und Docker-Container
Ich habe zuvor einen Artikel über die Dateiübertr...
Detaillierte Erläuterung der Werteübertragung von Vue-Eltern-Kind-Komponenten und der Probleme beim unidirektionalen Datenfluss
Inhaltsverzeichnis Vorwort 1. Die übergeordnete K...
Detaillierte Erläuterung der Installation von Anwendungen in Linux Centos7 ohne Internetverbindung
1. Im vorherigen Kapitel haben wir gelernt, dass ...
Lösung für das Problem, dass der Server bei der Installation des Pagoda Panels keine Remoteverbindung zur Datenbank herstellen kann
Ich plane, meine eigene Website zu erstellen, als...
Detaillierte Erklärung zur Installation von Redis im Docker und zum Starten als Konfigurationsdatei
Update: Vor Kurzem wurde festgestellt, dass der S...
Verwenden von Puppeteer zum Implementieren der Screenshot-Funktion für Webseiten unter Linux (CentOS)
Bei der Installation von Puppeteer unter Linux kö...
MySQL-FAQ-Serie: Wann werden temporäre Tabellen verwendet?
Einführung in temporäre Tabellen Was ist eine tem...
Muss MySql ein Commit durchführen?
Ob MySQL bei der Ausführung von Vorgängen wie Ein...
Detaillierte Erläuterung der grundlegenden Befehle der Firewalld-Firewall in Centos7
1. Grundlagen der Linux-Firewall Das Linux-Firewa...
Analyse von Problemen, die durch die Groß-/Kleinschreibung von MySQL verursacht werden
MySQL unterscheidet zwischen Groß- und Kleinschre...
Zusammenfassung der Verwendung von setTimeout() in JavaScript
Inhaltsverzeichnis 1. Einleitung 2. Der Unterschi...