Datatable with checkbox



  • I have the following code:

    <template>
      <div>
        <div class="layout-padding">
          <q-data-table
            :data="organizacoesApoiadas.content"
            :config="configs"
            :columns="columns">
    
            <template slot="col-selecione" scope="cell">
                <q-checkbox :value="cell.row.check" @input="preencheVariavel(cell.row)"></q-checkbox>
            </template>
          </q-data-table>
    
          <q-pagination
            v-model="paginaAtual"
            :max="organizacoesApoiadas.totalPages || 1"
            @input="getOrganizacoesApoiadas"></q-pagination>
          <button class="primary pull-right" @click="atualizar()">autorizar</button>
        </div>
      </div>
    </template>
    
    #JS
    <script>
      export default {
        name: 'OrganizacoesApoiadas',
        mounted () {
          this.getOrganizacoesApoiadas()
        },
        data () {
          return {
            cods: [],
            paginaAtual: 1,
            qtdPorPagina: 10,
            organizacoesApoiadas: { content: [] },
            configs: {
              rowHeight: '50px',
              messages: {
                noData: '<i class="text-red">Atenção: </i> Nenhuma organização encontrada!'
              }/* ,
              selection: 'multiple' */
            },
            columns: [
             // { label: 'Codigo', field: 'cdOrg', width: '60px' },
              { label: '', field: 'selecione', width: '100px', filter: true },
              { label: 'Nome da organização', field: 'nmOrg', width: '100px', filter: true },
              { label: 'Sigla da organização', field: 'sgOrg', width: '50px', filter: true }
            ]
          }
        },
        methods: {
          getOrganizacoesApoiadas () {
            this.boletimAPI()
            .buscarOrganizacoesApoiadas(this.paginaAtual, this.qtdPorPagina)
            .then(response => { this.organizacoesApoiadas = response.data })
          },
          preencheVariavel (data) {
            this.cods.push(data.cdOrg)
            console.log(this.props)
          },
          autorizar (data) {
            console.log(data)
          }
        }
      }
    </script>
    

    The problem is: The checkbox is not becaming checked when clicked. What am I doing wrong?

    Btw, I’m using v0.13



  • Hi.
    You can use Vue ref and get the att selectedRows

    computed: {
          listaSelecionada () {
            return this.$refs.table.selectedRows.map((organizacao) => { return organizacao.data.cdOrg })
          }
        }


  • v-model whit boolean is mandatory to check box works.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.