使用 Vue.js 通过按钮选择 q-table 中的行
P粉384679266
P粉384679266 2023-09-02 16:25:14
[Vue.js讨论组]
<p>当我按下 <code>q-table</code> 中的操作按钮中的编辑按钮时,该按钮会打开一个模式。但是,由于 <code>q-table</code> 中的复选框不可选择,因此当我想要更新模式时会收到错误。我想要的是当我单击操作按钮时,表检测到我已选择该行。</p> <p>我的桌子:</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;q-table title=&quot;Students&quot; :filter=&quot;filter&quot; :rows=&quot;studentsData&quot; :columns=&quot;columns&quot; row-key=&quot;id&quot; dense selection=&quot;single&quot; class=&quot;puffy-shadow rounded q-pa-lg students-table&quot; v-model:selected=&quot;selectedStudentRow&quot; &gt; &lt;template v-slot:body-cell-actions=&quot;props&quot;&gt; &lt;q-td :props=&quot;props&quot;&gt; &lt;q-btn class=&quot;action-btn&quot; color=&quot;green&quot; icon=&quot;mdi-pen&quot; @click=&quot;openStudentDialog = true;&quot;&gt; &lt;/q-td&gt; &lt;/template&gt; &lt;/q-table&gt; &lt;q-dialog v-model=&quot;addStudentNoteDialog&quot; class=&quot;add-student-note-dialog&quot;&gt; &lt;q-card&gt; &lt;q-card-section&gt; &lt;q-form&gt; &lt;q-input v-model=&quot;note&quot; label=&quot;Note&quot; outlined&gt;&lt;/q-input&gt; &lt;q-card-actions align=&quot;right&quot;&gt; &lt;q-btn label=&quot;Cancel&quot; color=&quot;primary&quot; @click=&quot;cancelNote&quot;&gt; &lt;/q-btn&gt; &lt;q-btn label=&quot;Add Note&quot; color=&quot;primary&quot; @click=&quot;addStudentNote(selectedStudentRow)&quot;&gt; &lt;/q-btn&gt; &lt;/q-card-actions&gt; &lt;/q-form&gt; &lt;/q-card-section&gt; &lt;/q-card&gt; &lt;/q-dialog&gt; &lt;/template&gt; &lt;script&gt; export default { name: &quot;StudentsTable&quot;, data(){ return{ openStudentDialog: false, } } computed: { selectedStudentRow: { get() { return this.$store.getters.selectedStudentRow; }, set(val) { this.$store.commit('selectedStudentRow', val); } } }, &lt;/script&gt;</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
}

类似的事情

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号