使用 Vue.js 通过按钮选择 q-table 中的行
P粉384679266
P粉384679266 2023-09-02 16:25:14
0
1
352
<p>当我按下 <code>q-table</code> 中的操作按钮中的编辑按钮时,该按钮会打开一个模式。但是,由于 <code>q-table</code> 中的复选框不可选择,因此当我想要更新模式时会收到错误。我想要的是当我单击操作按钮时,表检测到我已选择该行。</p> <p>我的桌子:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>当单击我想要的按钮时,模式将打开,并在表中选中复选框。我想要在这张图片中展示什么</p> <p>我尝试在按钮单击事件中发送 prop.row 。但它不起作用。</p>
P粉384679266
P粉384679266