VueJS Bootstrap-Vue b-table - 选中所有项目和当前项目？

Question

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

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

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

目前这是我的代码：

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

我知道如果我只是循环遍历 "schools" 数组，我就可以设置复选框。但是我不知道页面上显示了哪些，如果没有显示，我不想要任何复选框 "checked"。

是否可以根据行的 b-table 索引将复选框设置为 true？我可以遍历页面上的项目并将复选框设置为 true 吗？我要循环什么 object？

Answer 1

查看文档的 v-model Binding 部分。绑定到 v-model 属性的变量将包含显示项目的浅表副本。您可以修改此浅表副本的属性，它会修改项目数组中的项目。

VueJS Bootstrap-Vue b-table - 选中所有项目和当前项目？

VueJS Bootstrap-Vue b-table - Checkbox all and current items?

vue.js

bootstrap-4

bootstrap-vue