Bootstrap Vue 复选框 <b-table> <b-form-checkbox>

Question

我正在尝试将 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);
     }
 },

Answer 1

复选框值已经通过 v-model 存储在 list.modules[].selected 中，因此您可以只使用计算属性来获取所选模块，而不是使用单独的 selected 数组：

从 <b-form-checkbox> 中删除 @change="selection(⋯)":

<!--
<b-form-checkbox
  v-model="row.item.selected"
  @change="selection(row.item.moduleId)" // remove
>
-->

<b-form-checkbox
  v-model="row.item.selected"
>

删除 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)
    },
  },
}

demo

Bootstrap Vue 复选框 <b-table> <b-form-checkbox>

Bootstrap Vue Checkbox <b-table> <b-form-checkbox>

javascript

vue.js

bootstrap-vue