小编Jes*_*ica的帖子

bootstrap-vue表格行选择可以通过复选框选择

我目前有一个 bootstrap vue 表,其中左列都是复选框。我已将表行设置为可选择,工作正常。我希望能够通过复选框选择行,而不是单击实际的 .

我还想知道是否可以通过左上角的复选框选择所有行。

看看我的 jsfiddle 看看我现在有什么。

  • 可通过每行的复选框选择行
  • 所有行均可通过左上角的复选框选择

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>
Run Code Online (Sandbox Code Playgroud)

vue.js bootstrap-vue

7
推荐指数
1
解决办法
1万
查看次数

标签 统计

bootstrap-vue ×1

vue.js ×1