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

Posted 2023-02-23

【中文标题】选中Vue中一个复选框上的所有复选框

【英文标题】：Check all checkbox on one checkbox in 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”数据。

【参考方案1】：

你可以添加一个watch 钩子：

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

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