B表中复选框的自举问题 [英] bootstrap-vue issues with checkboxes in b-table

问题描述

我在使复选框正常工作时遇到问题.为选定"插槽中的每一行呈现的复选框未绑定到正确的行.当您单击该复选框时，它会将最上面几行的复选框设置为true/false.

I'm having an issue getting the checkboxes to work correctly. The checkboxes that are being rendered for each row in the "selected" slot are not binding to the correct row. When you click the checkbox, it sets the top rows' checkbox to true/false position.

问题: 1)如何将该行的复选框的真/假状态绑定到其行项目?我试图将其绑定到data.item.selected，然后遍历数据以查找"selected"对象并执行必要的操作.我什至尝试将行对象添加到新的数据数组中，但只添加了顶部行?

Questions: 1) How to bind the true/false state of the checkbox for the row to it's row item? I'm trying to bind it to data.item.selected and then loop through the data to find the "selected" objects and perform the necessary action. I even tried adding the row object to a new data array, but it only adds the top row?

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

2) What would be the best way to turn all of the row checkbox's true/false based on the HEAD_selected slot checkbox?

代码:

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

推荐答案

答案:

问题是b-form-checkbox中的ID. id ="checkbox"已绑定到同一复选框.一旦将其更改为:id ='checkbox'+ data.index"，它就可以工作！

The issue was the id in the b-form-checkbox. id="checkbox" was binding to the same checkbox. Once I changed it to :id="'checkbox'+data.index" it worked!

这篇关于B表中复选框的自举问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！