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
So verwenden Sie den Vue-Filter
Inhaltsverzeichnis Überblick Filter definieren Ve...
Fassen Sie die Probleme zusammen, die bei der Verwendung der Vue Element-Benutzeroberfläche auftreten
Inhaltsverzeichnis 1. DateTimePicker Datumsauswah...
MySQL-Index-Pushdown in fünf Minuten verstehen
Inhaltsverzeichnis Was ist Index-Pushdown? Das Pr...
9 Tipps zur MySQL-Datenbankoptimierung
Inhaltsverzeichnis 1. Wählen Sie die am besten ge...
So installieren Sie den Zookeeper-Dienst auf einem Linux-System
1. Erstellen Sie den Ordner /usr/local/services/z...
Acht Beispiele, wie Vue Komponentenkommunikation implementiert
Inhaltsverzeichnis 1. Props übergeordnete Kompone...
Beheben Sie schnell die Probleme des falschen Formats, des langsamen Imports und des Datenverlusts beim Importieren von Daten aus MySQL
Wenn Sie das langsame Problem ein für alle Mal lö...
Nodejs kombiniert mit Socket.IO zur Realisierung einer sofortigen WebSocket-Kommunikation
Inhaltsverzeichnis Warum WebSocket verwenden? Soc...
Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt
Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...
jQuery implementiert ein atmendes Karussell
In diesem Artikel wird der spezifische Code von j...
Lösen Sie das Problem der regelmäßigen automatischen Dateilöschung durch Crontab + Shell-Skript unter Centos7
Problembeschreibung: In letzter Zeit besteht die ...
Fragen zum Vorstellungsgespräch zu JS 9 Promise
Inhaltsverzeichnis 1. Mehrere .catch 2. Mehrere ....
Einführung und Verwendung von fünf Controllern in K8S
Inhaltsverzeichnis Controllertyp von k8s Beziehun...
Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.17
MySQL-Version: MySQL Community Server 5.7.17, ins...
Lernen Sie, wie Sie Uniapps und Miniprogramme (Bilder und Text) untervergeben
Inhaltsverzeichnis 1. Subunternehmer für Miniprog...