我在使复选框正常工作时遇到问题。为“选定”槽中的每一行呈现的复选框未绑定到正确的行。当您单击该复选框时,它将顶行的复选框设置为真/假位置。
问题:
1)如何将行复选框的真/假状态绑定到其行项目?我试图将其绑定到 data.item.selected,然后循环遍历数据以查找“选定”对象并执行必要的操作。我什至尝试将行对象添加到新的数据数组中,但它只添加顶行?
2)根据 HEAD 选择的插槽复选框将所有行复选框设置为真/假的最佳方法是什么?
Code:
<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>
Answer:
问题是 b-form-checkbox 中的 id。 id="checkbox" 绑定到同一个复选框。一旦我将其更改为 :id="'checkbox'+data.index" ,它就起作用了!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)