Can bootstrap-vue table row selection be selected via a checkbox

Question

I currently have a bootstrap vue table that has the left column all being checkboxes. I have set the table rows to be selectable which is working fine. I'd like to be able to select the rows via a checkbox and not clicking on the actual .

I'd also like to know if it's possible to select all rows via the top left checkbox.

take a look at my jsfiddle to see what i have now.

• rows selectable via checkbox for each row
• all rows selectable via top left checkbox

https://jsfiddle.net/itsjess/mLztuf6o/2/

<b-table id="my-table" class="mb-20" :borderless="true" 
      :items="merchants" :fields="fields" selectable @row- 
      selected="rowSelected" selectedVariant="success" :per- 
      page="perPage" :current-page="currentPage" small responsive>
     <template slot="HEAD_index" slot-scope="data">
                <b-form-checkbox></b-form-checkbox>
            </template>

     <template slot="index" slot-scope="data">
                <b-form-checkbox :id="'checkbox' + data.index" v-model="data.item.index" checked="checked">
                </b-form-checkbox>
            </template>

    <template slot="outlet" slot-scope="data">
                {{ data.item.name }}
            </template>

     <template slot="orderacc" slot-scope="data">
                on
            </template>

     <template slot="taskcomp" slot-scope="data">
                40%
            </template>
</b-table>

Answer 1

i achieved this using Refs on the table and scoped cell slot. i added a cell scoped slot then used rowSelected which is aboolean to my checkbox v-model then added a change event to also trigger selection of the row when a checkbox is checked and unchecked.

 <b-table ref="tableRef" selectable   select-mode="multi">
 </b-table>

   <template #cell(selected)="data">
          <b-form-checkbox
            @change="checked(data.index, data.rowSelected)"
            v-model="data.rowSelected"
          >
          </b-form-checkbox>          
    </template>

 checked(index: number, checked: boolean) {
    let tableRef: any = this.$refs.tableRef
    // to select all use tableRef.selectAllRows()
    // to see all availabe table properties just do a console.log(tableRef)
    if (checked === false){
    tableRef.selectRow(index)
    } else {
      tableRef.unselectRow(index)
    }
  }