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 rowkey
, 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.