Question

我正在将Bootstrap-Vue B表与b分页组件（https://bootstrap-vue.js.org/docs/components/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吗？我要遍历哪个对象？

Answer 1

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

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

1 个答案: