使用 Vue.js 通过按钮选择 q-table 中的行
P粉384679266
2023-09-02 16:25:14
<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>
您在哪里“记录”数据?
如果我理解正确,我会创建类似的东西:
类似的事情