Question

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

P.S。如果您将通过某些API接收带有动态项目的表，则必须将uuid存储为复选框值而不是对象引用（例如在我的jsfiddle中）。

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

可以通过复选框选择Bootstrap-Vue表行选择

2 个答案: