Checkbox in a table using Quasar

user_15005699 0
Viewed 2003

Im trying to insert a checkbox column using quasar. The way I did, it only appears as the first element of the table, and I want it as the second element. How do I do this?

Example:

export default {
  name: 'DespesasGeraisBKOOnline',

  data() {
  return{
        columns: [
        {
          name: 'acoes',
          label: 'Ações',
          field: (row) => row.acoes,
          sortable: true,
          align: 'center',
        },
        {
          name: 'pc',
          align: 'center',
          label: 'PC  ',
          sortable: false,
        },
        {
          name: 'criada_em',
          label: 'Criada em',
          field: (row) => row.criada_em,
          sortable: true,
          align: 'center',
        },
        {
          name: 'nome',
          label: 'Nome',
          field: (row) => row.nome,
          sortable: true,
          align: 'center',
        },
      }
    }
     
 <q-table
          :data="data"
          :columns="columns"
          row-key="id"
          selection="multiple"
          class="default-table q-mt-xs"
        >
          <template v-slot:no-data="{}">
            <div class="full-width row flex-center no-data-finded q-gutter-sm">
              <span>
                {{ loading ? 'Carregando...' : 'Nenhuma despesa encontrada.' }}
              </span>
            </div>
          </template>
        </q-table>

If you run the code, you can see that the first column is the "checkbox". However, I want this as the second column.

quasar quasar-framework vue.js
1 Answers
<template v-slot:body="props">
    <q-tr :props="props">
        <q-td key="text" :props="props">{{ props.row.title }}</q-td>
        <q-td key="radio" :props="props"><q-radio v-model="input" :label="props.row.label" /></q-td>
        <q-td key="checkbox" :props="props"><q-checkbox v-model="input" :label="props.row.label" /></q-td>
        <q-td key="button" :props="props"><q-btn label="btn" @click="method"/></q-td>
    </q-tr>
</template>

This is the way i usually define table if i want to insert any form control peacefully within any column
user_140114420
Related