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

Posted 2023-02-22

【中文标题】可以通过复选框选择 bootstrap-vue 表行选择吗

【英文标题】：Can bootstrap-vue table row selection be selected via a checkbox

【发布时间】：2019-11-01 16:49:56

【问题描述】：

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

【参考方案1】：

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

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

附：如果您将通过某些 API 获得包含动态项目的表格，则有必要将 uuid 存储为复选框值而不是对象引用（如在我的 jsfiddle 中）。

【讨论】：

是否可以将其实现为 mixin ？这样每个需要这种表格元素的视图都可以轻松地从中受益，而无需再次重新实现它（并保持 DRY 原则）

【参考方案2】：

我使用表上的 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)