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