我正在尝试将 b-form-checkbox 与 b-table 一起使用。尝试检索选定的模块 ID。
<b-table
id="module-table"
:items="list.modules"
:fields="fields"
:busy="isBusy">
<template slot="num" slot-scope="row">
{{ row.index + 1 }}
</template>
<template slot="checkbox" slot-scope="row">
<b-form-group>
<b-form-checkbox v-if="!isLoading" v-model="row.item.selected" @change="selection(row.item.moduleId)" variant="outline-secondary" class="mr-1">
</b-form-checkbox>
</b-form-group>
</template>
</b-table>
data: {
fields: [
{ key: 'checkbox', label: '', class: 'd-none d-lg-table-cell' },
{ key: 'num', label: 'Num', class: 'd-none d-lg-table-cell' },
],
selected: []
}
虽然我能够检索选定的模块 ID,但在切换复选框时无法删除它们。如果有人可以提供有关如何跟踪复选框是否被选中(true)或未选中(false)的想法。提前致谢。
methods: {
selection(item) {
if (true)
app.selected.push(item);
else
app.selected = app.selected.map(x => x != item);
}
}, Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
复选框值已通过
v-model存储在list.modules[].selected中,因此您可以仅使用计算的 prop 来获取所选模块,而不是使用单独的selected数组:<b-form-checkbox>中删除@change="selection(⋯)":selection方法和selected数据属性,因为不再需要它们。export default { data() { return { // selected: [] // remove } }, methods: { // selection() {⋯} // remove } }list.modules[]中选定的模块:export default { computed: { selected() { return this.list.modules.filter(module => module.selected) }, }, }演示