Vue.js 是否可以通过复选框选择引导vue表行选择

我目前有一个引导vue表，左边的列都是复选框。我已将表格行设置为可选择，这很好。我希望能够通过复选框选择行，而不是单击实际行

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

看看我的JSFIDLE，看看我现在有什么

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

{{data.item.name}
在…上
40%

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

删除

可选

和

@行选定

绑定，并将选定项添加到您自己的数组中。 我从您的JSFIDLE中准备了一些实现：

---

另外，如果您的表中包含通过某些API接收的动态项，则有必要将

uuid

存储为复选框值，而不是对象引用（如在我的JSFIDLE中）。

我使用表上的引用和作用域单元格槽来实现这一点。 我添加了一个单元格范围的插槽，然后使用了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)
    }
  }

选中（索引：数字，选中：布尔值）{
设tableRef:any=this.$refs.tableRef
//要选择全部，请使用tableRef.selectAllRows（）
//要查看所有可用的表属性，只需执行console.log（tableRef）
如果（选中===false）{
tableRef.selectRow（索引）
}否则{
tableRef.非电子流（索引）
}
}

是否可以将其作为mixin实现？因此，每个需要这样一个表元素的视图都可以很容易地从中受益，而无需再次实现它（并保持干燥原则）

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