使用 Vue.js 通过按钮选择 q-table 中的行
P粉384679266
P粉384679266 2023-09-02 16:25:14
0
1
580
<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

全部回复(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
}

类似的事情

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板