vendredi 18 novembre 2022

Allow only one checkbox to be checked on b-table bootstrap vue

I have a column of checkboxes on a b-table but I only want the user to be able to select one. Selecting another should uncheck the first option.

I tried to set selected = [] and refresh the table upon selection of a second checkbox but while the selected object ends up with the correct row data, the checkbox still appears on the table.

I also tried to call this.$refs.myTable.clearSelected() but that did not seem to have any effect beyond setting my v-model to null.

Here is the table code:

          <b-table
          no-provider-filtering
          ref="groupTable"
          show-empty
          stacked="md"
          :items="ParamProvider"
          :fields="fields"
          striped
          outlined
          hover
          class="bg-light"
          :current-page="current_page"
          :per-page="per_page"
          :filter="filter"
          :filter-included-fields="filterOn"
          :sort-by.sync="sortBy"
          :sort-desc.sync="sortDesc"
          :sort-direction="sortDirection"
          @filtered="onFiltered"
        >
          <template v-slot:cell(selected)="row">
            <b-form-group>
              <input type="checkbox" @click.stop="addToSelected(row.item, row.index)"/>
            </b-form-group>
          </template>

          <template v-slot:cell(actions)="data">
            <b-button size="sm" variant="danger" b-tooltip title="Delete"
                      @click.stop="removeItem(data.item, data.index)"><i
              class="fa fa-trash"></i></b-button>
          </template>

        </b-table>



Aucun commentaire:

Enregistrer un commentaire