b-table 中的复选框的 bootstrap-vue 问题

Posted

技术标签:

【中文标题】b-table 中的复选框的 bootstrap-vue 问题【英文标题】:bootstrap-vue issues with checkboxes in b-table 【发布时间】:2019-03-23 19:26:12 【问题描述】:

我在让复选框正常工作时遇到问题。为“选定”插槽中的每一行呈现的复选框未绑定到正确的行。当您单击复选框时,它会将顶行的复选框设置为真/假位置。

问题: 1)如何将行的复选框的真/假状态绑定到它的行项?我正在尝试将其绑定到 data.item.selected ,然后遍历数据以查找“选定”对象并执行必要的操作。我什至尝试将行对象添加到新的数据数组中,但它只添加了第一行?

2) 根据 HEAD_selected 插槽复选框将所有行复选框的真/假设为真/假的最佳方法是什么?

代码:

<b-table 
  striped 
  hover 
  outlined 
  :items="schools" 
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :total-rows="totalRows"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc">

  <template slot="HEAD_selected" slot-scope="data">
    <b-form-checkbox @click.native.stop v-model="allSelected">
    </b-form-checkbox>
  </template>

  //Not working. data.item.selected is always the top row in all of the results, not it's current position
  <template slot="selected" slot-scope="data">
    <b-form-checkbox id="checkbox" @click.stop v-model="data.item.selected">
    </b-form-checkbox>
  </template>

</b-table>

【问题讨论】:

【参考方案1】:

答案:

问题在于 b-form-checkbox 中的 id。 id="checkbox" 绑定到同一个复选框。一旦我将其更改为 :id="'checkbox'+data.index" 它就起作用了!

【讨论】:

以上是关于b-table 中的复选框的 bootstrap-vue 问题的主要内容,如果未能解决你的问题,请参考以下文章

Vue-Bootstrap:如何触发一个 b-table 的排序以触发另一个 b-table 的排序?

使 bootstrap-vue b-table 'Id' 列不可见

在 Bootstrap Vue <b-table> 中动态创建模板槽

在 Bootstrap-Vue 中按列对 <b-table> 进行排序并禁止用户排序

Bootstrap-vue b-table:如何为非活动行设置 css-Class?

Vue Bootstrap b-table 懒加载数据