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

4
votes

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>
2
vue.jsbootstrap-vue

2 Answers

1
votes

I don't see any support for selecting rows via checkbox in bootstrap table, so probably you have to handle this case by yourself:

Remove selectable and @row-selected bindings and add selected items to your own array. I prepared some implementation from your jsfiddle: https://jsfiddle.net/maxsinev/unp7jzwo/

P.S. If you will have table with dynamic items which you will receive through some API it will be necessary to store uuid as checkbox value instead of an object reference (like in my jsfiddle).

0
votes

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)
    }
  }