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

Question

我目前有一个 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>

Answer 1

我没有看到任何支持通过引导表中的复选框选择行，所以可能您必须自己处理这种情况：

删除selectable和@row-selected绑定并将选定的项目添加到您自己的数组中。我从你的 jsfiddle 中准备了一些实现：https ://jsfiddle.net/maxsinev/unp7jzwo/

PS 如果您有包含动态项目的表，您将通过某些 API 接收这些项目，则有必要将其存储uuid为复选框值而不是对象引用（就像在我的 jsfiddle 中一样）。