Search code examples
vue.jsquasar

How do I identify the cell selected in a Quasar table?


How do I identify the cell selected in a Quasar table?

My goal is that once I identify the cell selected, if the user clicks on a custom button, I pass the selected cell information to a pop up page.

Note I'm not using the row selection checkboxes.

we want to be able to select multiple cells from a given column in a quasar table. I believe that this will take a custom selection capability.


Solution

  • You can archive the selection using the data index. Please refer the following codepen for multiple row selection.

    https://codepen.io/anon/pen/PrNBpV

    And for cell selection refer this.

    https://codepen.io/anon/pen/gNrdyL?editors=1010

    try this

      <q-td key="desc" :props="props" v-for="col in props.cols" :key="col.name" @click.native="selectRow(props.row.__index,col.name)" :class="selected.hasOwnProperty(props.row.__index) && selected[props.row.__index].indexOf(col.name)!=-1?'bg-grey-2':''">
                  {{ props.row[col.field] }}
                </q-td>