可以通过复选框选择 bootstrap-vue table 行选择吗

Question

我目前有一个 bootstrap vue table，它的左栏都是复选框。我已将 table 行设置为 selectable，这工作正常。我希望能够 select 通过复选框而不是单击实际的行。

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

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

行select可以通过每行的复选框
所有行select可通过左上角的复选框

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

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

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

P.S。如果你将 table 与你将通过一些 API 收到的动态项目，则有必要将 uuid 存储为复选框值而不是对象引用（就像在我的 jsfiddle 中）。

Answer 2

我在 table 和作用域单元槽上使用 Refs 实现了这一点。我添加了一个单元格范围的插槽，然后使用了 rowSelected，它是我的复选框 v-model 的布尔值，然后添加了一个更改事件，以便在选中和取消选中复选框时也触发行的选择。

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

可以通过复选框选择 bootstrap-vue table 行选择吗

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

vue.js

bootstrap-vue