Wählen Sie Zeilen in der Q-Tabelle über Schaltflächen mit Vue.js aus
P粉384679266
P粉384679266 2023-09-02 16:25:14
0
1
585
<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>
P粉384679266
P粉384679266

Antworte allen(1)
P粉349222772
<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
}

类似的事情

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage