选中Vue中一个复选框上的所有复选框答案

【问题标题】：Check all checkbox on one checkbox in Vue选中Vue中一个复选框上的所有复选框
【发布时间】：2020-05-20 05:14:00
【问题描述】：

我正在使用 Bootstrap vue。我尝试在一个复选框上检查我的 b 表中的所有复选框。我的复选框位于名为“selected”的插槽内的标签中的 b 表中。

<b-table id="myTabel"
            head-variant="light"
            :items="items"
            :fields="fields">
            <template slot="selected" slot-scope="row">
               <b-form-group>
                  <b-form-checkbox-group id="checkbox-group-2" v-model="selected">
                     <b-form-checkbox :value="row.item.mctname"/>
                  </b-form-checkbox-group>
               </b-form-group>
            </template>
</b-table>

这是我的“全选”复选框

<b-form-checkbox v-model="allSelected">
    {{ allSelected ? 'Uncheck All' : 'Check All' }}         
</b-form-checkbox>

这是我的脚本代码

<script>
    export default{
       data: () => {
          return {
             selected:'',
             items:[],
             allSelected: false,
             fields:{
                   mid: {
                   label: "MID",
                   mid: "MID",
                },
                   mctname: {
                   label: "Name",
                   sortable: true,
                },
                   status:{
                   label: "Status"
                },                 
             },
    }
</script>

我正在使用 axios 来处理我的表格数据

    loadTable: function() {
    this.loading = true;
    axios
        .get(baseUrl + ".../get_all_items")
        .then(response => {
        this.items = JSON.parse(response.request.responseText);
        this.loading = false;
        this.totalRows = this.items.length;

        })
        .catch(function(error) {
        console.log(error);
        this.loading = false;
        });
    },

如何在单击表格顶部的“全部选中”复选框时选中所有复选框并取消选中所有复选框？并且在所有的复选框都被选中后，它会返回所有的“mctname”数据。

【问题讨论】：

标签： javascript vue.js vue-component bootstrap-vue

【解决方案1】：

你可以添加一个watch 钩子：

watch: {
    allSelected: {
        immediate: true,
        handler: function(val) {
            if (val) {
                this.selectAll = true;
                this.returnData();
            } else {
                this.selectAll = false;
            }
        }
    }
}

然后让所有的复选框都依赖于selectAll

【讨论】：