Wählen Sie Zeilen in der Q-Tabelle über Schaltflächen mit Vue.js aus

Question

Wenn ich in der Aktionsschaltfläche in q-table auf die Schaltfläche „Bearbeiten“ drücke, wird ein Modal geöffnet. Da das Kontrollkästchen in q-table 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.

Mein Tisch:

<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>

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

Ich habe versucht, prop.row bei einem Schaltflächenklickereignis zu senden. Aber es funktioniert nicht.

Answer 1

<q-input v-model="note" label="Note" outlined></q-input>

您在哪里“记录”数据？

如果我理解正确，我会创建类似的东西：

<template>
    <q-table
        title="Students"
        :filter="filter"
        :rows="studentsData"
        :columns="columns"
        row-key="id"
        dense
        selection="single"
        class="puffy-shadow rounded q-pa-lg students-table"
        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" @click="openStudentDialog(props.row)">
        </q-td>
      </template>
</q-table>

<q-card>
        <q-card-section>
          <q-form>
            <q-input v-model="selectedStudent.note" label="Note" outlined></q-input>

        </q-card-section>

</q-card>


[......]
data(){
    return{
      studentDialog: false,
      selectedStudent: {}
    }
  }, 

methods: {
openStudentDialog(student){
    selectedStudent = student
    studentDialog = true
}

类似的事情