Maison > Questions et réponses > le corps du texte
J'essaie d'utiliser b-form-checkbox avec b-table. Essayez de récupérer l'ID du module sélectionné.
<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: [] }
Bien que je puisse récupérer les ID de module sélectionnés, je ne peux pas les supprimer lorsque je coche la case. Si quelqu'un pouvait donner une idée sur la façon de savoir si une case est cochée (vrai) ou décochée (faux). Merci d'avance.
methods: { selection(item) { if (true) app.selected.push(item); else app.selected = app.selected.map(x => x != item); } },
P粉0869937882024-04-01 10:33:43
Valeur de la case à cocher passée v-model
存储在 list.modules[].selected
中,因此您可以仅使用计算的 prop 来获取所选模块,而不是使用单独的 selected
Tableau :
<b-form-checkbox>
中删除 @change="selection(⋯)"
:selection
方法和 selected
les attributs de données car ils ne sont plus nécessaires. export default { data() { return { // selected: [] // remove } }, methods: { // selection() {⋯} // remove } }
list.modules[]
: export default { computed: { selected() { return this.list.modules.filter(module => module.selected) }, }, }