vue.jsbootstrap-vue

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


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.

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>

Solution

  • 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).