Select Q-table row programatically



  • 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)
        }
    


  • @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)
        }
    


  • tof06, thanks for the tip.


Log in to reply