How to detect row clicks in qtable when combining with body-cell-[name] slots?



  • I’m using a q-table with scoped slots to format certain columns:

    <q-table
            :data="data"
            :columns="columns"
            row-key="id"
          >
            <template v-slot:body-cell-rating="props">
              <q-td>
                <q-rating
                  v-model="props.row.rating"
                  icon="star"
                  readonly
                />
              </q-td>
            </template>
    </q-table>
    

    The table has many columns. Now I’d like to detect when the user clicks a row. I can do that like this:

    <template v-slot:body="props">
            <q-tr :props="props" @click.native="requestRowClick(props.row.id)">
            </q-tr>
    </template>
    

    However, the problem with doing this is that this overrides the whole body, meaning I will have to specify a q-td manually for each column.

    Is it possible to combine these two somehow so that I can use the body-cell-[name] slot and at the same time detect row clicks?



  • @Gnopps You can just use body slot and use v-for for the columns.

    ...
    <q-td v-for="col in props.cols" :key="col.name" :props="props">
      <template v-if="col.name === 'ratingcell'">
        <q-rating .../>
      </template>
      <template v-else>{{col.value}}</template>
    ...
    


  • Yes, this works. Thanks a lot!


Log in to reply