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

    Select Q-table row programatically

    Framework
    2
    3
    2636
    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.
    • CWoodman
      CWoodman last edited by

      Is there a way to programatically select/unselect Q-table rows? Note: I’m using a table without checkboxes - clicking on a row highlights the entire row.
      Here’s my code:

            class="my-tickets-table"
            :pagination.sync="pagination"
            hide-bottom
            :data="ticketList"
            :columns="columns"
            selection="single"
            row-key="ticket_number"
            :selected.sync="selected"
            :loading="loading"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  {{ col.label }}
                </q-th>
              </q-tr>
            </template>
      
            <template v-slot:body="props">
              <q-tr class="cursor-pointer" :props="props"
                @click.native="selectRow(props.row, props.row.ticket_number, $event)">
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  {{ col.value }}
                </q-td>
              </q-tr>
            </template>
          </q-table>
      
      methods: {
          selectRow (row, ticketNumber, event) {
            // Warn user if currently displayed ticket has been updated and not saved
            if (this.ticketChanged) {
              if (!confirm('You have not saved changes. Do you want to continue anyway?')) {
                // If user cancels the selection, stay put
                event.preventDefault()
                return false
              }
            }
            // Getting another ticket will forget changes if any
            // Switch selection so row will be highlighted
            this.selected = []
            this.selected.push(row)
            this.$store.commit('SET_SELECTED_TICKET', ticketNumber)
            this.$store.dispatch('getTicket', ticketNumber)
          }
      
      1 Reply Last reply Reply Quote 0
      • T
        tof06 last edited by

        @CWoodman the selected array should contain the row key, not the entire row.
        I would make :

        selectRow (row, ticketNumber, event) {
              // Warn user if currently displayed ticket has been updated and not saved
              if (this.ticketChanged) {
                if (!confirm('You have not saved changes. Do you want to continue anyway?')) {
                  // If user cancels the selection, stay put
                  event.preventDefault()
                  return false
                }
              }
              // Getting another ticket will forget changes if any
              // Switch selection so row will be highlighted
        
              this.selected = [ ticketNumber ] // <-- Use row key = ticket number. No need to create an empty array and push the value though :)
        
              this.$store.commit('SET_SELECTED_TICKET', ticketNumber)
              this.$store.dispatch('getTicket', ticketNumber)
            }
        
        1 Reply Last reply Reply Quote 0
        • CWoodman
          CWoodman last edited by

          tof06, thanks for the tip.

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