Bootstrap Vue 复选框 <b-table> <b-form-checkbox>
P粉684720851
P粉684720851 2024-03-31 18:36:11
0
1
546

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

P粉684720851
P粉684720851

全部回复(1)
P粉086993788

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

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



  1. 删除 selection 方法和 selected 数据属性,因为不再需要它们。
export default {
  data() {
    return {
      // selected: []  // remove
    }
  },
  methods: {
    // selection() {⋯}  // remove
  }
}
  1. 添加一个计算属性,用于过滤 list.modules[] 中选定的模块:
export default {
  computed: {
    selected() {
      return this.list.modules.filter(module => module.selected)
    },
  },
}

演示

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板