时间戳

首页 > 解决方案 > 可以通过复选框选择 bootstrap-vue 表行选择吗

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

问题描述

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

标签： vue.jsbootstrap-vue

解决方案

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

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

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

推荐阅读