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.



  • I have another solution https://codesandbox.io/s/zrmmq55nxl

    Dont know how to make the $q.theme work, so the checbox are not showing the icons.
    Btw it works.


Log in to reply
 

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