使用 Vue.js 透過按鈕選擇 q-table 中的行

Question

當我按下 q-table 中的操作按鈕中的編輯按鈕時，該按鈕會開啟模式。但是，由於 q-table 中的複選框不可選擇，因此當我想要更新模式時會收到錯誤。我想要的是當我單擊操作按鈕時，表檢測到我已選擇該行。

我的桌子：

<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 = true;">
        </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" outlined></q-input>
            <q-card-actions align="right">
              <q-btn label="Cancel" color="primary"
                     @click="cancelNote">
              </q-btn>
              <q-btn label="Add Note" color="primary"
                     @click="addStudentNote(selectedStudentRow)">
              </q-btn>
            </q-card-actions>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </template>

<script>
export default {
  name: "StudentsTable",
  data(){
    return{
      openStudentDialog: false,
    }
  }
  computed: {
    selectedStudentRow: {
      get() {
        return this.$store.getters.selectedStudentRow;
      },
      set(val) {
        this.$store.commit('selectedStudentRow', val);
      }
    }
  },
</script>

當單擊我想要的按鈕時，模式將打開，並在表中選中復選框。我想在這張圖片中展示什麼

我嘗試在按鈕點擊事件中發送 prop.row 。但它不起作用。

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
}

類似的事情