VueJS Bootstrap-Vue b-table - 复选框所有和当前项目？答案

【问题标题】：VueJS Bootstrap-Vue b-table - Checkbox all and current items?VueJS Bootstrap-Vue b-table - 复选框所有和当前项目？
【发布时间】：2018-10-24 00:07:33
【问题描述】：

我正在使用带有 b-pagination 组件 (https://bootstrap-vue.js.org/docs/components/table/) 的 bootstrap-vue b-table。我让它每页加载约 50 个项目，每行都有一个 b-form-checkbox。我在以下方面没有成功：

1) 将行项目复选框映射到表标题中的主“selectAll”复选框值。我知道如何做到这一点的唯一方法是浏览所有项目并将所有内容设置为 true，但我不想对所有项目都这样做。我只希望它在页面上的当前项目列表中完成。当您过滤并仅显示 10 个项目时，这也是需要的，SelectAll 应该只选择这 10 个项目，而不是未显示的 11K 项目。

2) 如何获取表格的 currentPage（分页）上的项目列表？如何根据 b 表索引初始化复选框？

目前这是我的代码：

<b-table 
  striped 
  hover 
  small 
  outlined 
  :items="schools" 
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :total-rows="totalRows"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  @filtered="onFiltered"
>
  <template slot="HEAD_selected" slot-scope="data">
    <b-form-checkbox @click.native.stop @change="select" v-model="allSelected">
    </b-form-checkbox>
  </template>

  <template slot="selected" slot-scope="data">
    <b-form-checkbox @click.native.stop :value="data.item.schoolId" :checked="allSelected" v-model="selected">
    </b-form-checkbox>
    {{data.index}}
  </template>
</b-table>
<b-pagination size="md" :total-rows="totalRows" v-model="currentPage" :per-page="perPage">
</b-pagination>

我知道如果我只是循环遍历“学校”数组，我可以设置复选框。但是我不知道页面上显示了哪些复选框，并且如果未显示任何复选框，我也不希望它们被“选中”。

有没有办法根据行的 b 表索引将复选框设置为 true？我可以循环浏览页面上的项目并将复选框设置为 true 吗？我要循环什么对象？

【问题讨论】：

我注意到 b-table 组件有一个“computedItems”对象，它具有表上项目的当前视图。有什么方法可以访问这个吗？

标签： vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

查看文档的v-model Binding 部分。绑定到 v-model 属性的变量将包含显示项目的浅拷贝。你可以修改这个浅拷贝的属性，它会修改你的 items 数组中的项目。

【讨论】：