Wählen Sie Zeilen in der Q-Tabelle über Schaltflächen mit Vue.js aus
P粉384679266
2023-09-02 16:25:14
<p>Wenn ich in der Aktionsschaltfläche in <code>q-table</code> auf die Schaltfläche „Bearbeiten“ drücke, wird ein Modal geöffnet. Da das Kontrollkästchen in <code>q-table</code> jedoch nicht auswählbar ist, erhalte ich eine Fehlermeldung, wenn ich das Schema aktualisieren möchte. Ich möchte, dass die Tabelle erkennt, dass ich die Zeile ausgewählt habe, wenn ich auf die Aktionsschaltfläche klicke. </p>
<p>Mein Tisch:</p>
<pre class="brush:php;toolbar:false;"><template>
<q-Tabelle
title="Studenten"
:filter="filter"
:rows="studentsData"
:columns="columns"
row-key="id"
dicht
Auswahl="einzeln"
class="puffy-shadow abgerundeter q-pa-lg studententisch"
v-model:selected="selectedStudentRow"
>
<template v-slot:body-cell-actions="props">
<q-td :props="props">
<q-btn class="action-btn" color="green" icon="mdi-pen"
</q-td>
</template>
</q-table>
<q-dialog v-model="addStudentNoteDialog" class="add-student-note-dialog">
<q-card>
<q-card-section>
<q-form>
<q-input v-model="note" label="Note"
<q-card-actions align="right">
<q-btn label="Abbrechen" color="primär"
@click="cancelNote">
</q-btn>
<q-btn label="Notiz hinzufügen" color="primär"
@click="addStudentNote(selectedStudentRow)">
</q-btn>
</q-card-actions>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script>
Standard exportieren {
Name: "StudentsTable",
Daten(){
zurückkehren{
openStudentDialog: false,
}
}
berechnet: {
selectedStudentRow: {
erhalten() {
return this.$store.getters.selectedStudentRow;
},
set(val) {
this.$store.commit('selectedStudentRow', val);
}
}
},
</script></pre>
<p>Wenn auf die gewünschte Schaltfläche geklickt wird, wird das Modal geöffnet und das Kontrollkästchen in der Tabelle aktiviert.Was möchte ich in diesem Bild zeigen</p>
<p>Ich habe versucht, prop.row bei einem Schaltflächenklickereignis zu senden. Aber es funktioniert nicht. </p>
您在哪里“记录”数据?
如果我理解正确,我会创建类似的东西:
类似的事情