Vue.js中点击q-table操作按钮时自动选中对应行的问题

核心修改方案 #

要实现点击操作按钮时自动选中对应行并打开模态框，只需在按钮点击事件中同时完成选中行赋值和打开模态框两个操作，同时修正代码中模态框绑定变量不一致的问题。

修改后的操作列模板代码 #

<template v-slot:body-cell-actions="props">
  <q-td :props="props">
    <q-btn 
      class="action-btn" 
      color="green" 
      icon="mdi-pen" 
      @click="selectedStudentRow = props.row; addStudentNoteDialog = true;"
    />
  </q-td>
</template>

修正模态框的v-model绑定 #

你的代码中按钮触发的是openStudentDialog，但模态框绑定的是addStudentNoteDialog，变量不一致会导致模态框无法正常弹出，需要统一：

<q-dialog v-model="addStudentNoteDialog" class="add-student-note-dialog">
  <!-- 原有模态框内容保持不变 -->
</q-dialog>

原尝试未生效的原因 #

你提到传递prop.row未生效，主要是两个问题：

• 拼写错误：插槽参数是props（复数形式），正确取值应为props.row而非prop.row
• 未触发选中逻辑：仅传递行数据但未将其赋值给绑定选中状态的selectedStudentRow变量，无法触发表格的选中更新

额外说明 #

由于selectedStudentRow是绑定到Vuex的计算属性，直接赋值会触发其setter方法，将选中行同步到store中，这样模态框内调用addStudentNote(selectedStudentRow)时就能获取到正确的行数据，避免更新时出现错误。

内容的提问来源于stack exchange，提问作者quasar121w31