No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    3
    757
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      Gnopps last edited by Gnopps

      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?

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @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>
        ...
        
        1 Reply Last reply Reply Quote 1
        • G
          Gnopps last edited by

          Yes, this works. Thanks a lot!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post