el-checkbox-group全选无效问题

热爱蛋炒饭

已于 2025-01-16 10:15:29 修改

阅读量1.6k

点赞数

分类专栏：技术文章标签： javascript 前端 vue.js

于 2022-08-15 20:37:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37882162/article/details/126354369

版权

技术专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中利用el-checkbox-group和el-checkbox组件实现全选功能。通过绑定label属性来设置选项，并通过v-model和@change事件监听全选状态的变化。在handleCheckAllChange方法中，根据全选状态更新选中的选项列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-checkbox-group的label绑定的是el-checkbox中的label属性，并非是key属性。

<div style="margin-top: 20px">
            <template>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkboxGroup" @change="handleCheckedShopChange">
                    <el-checkbox v-for="shop in shoplist" :label="shop.shopid" >{{shop.shopname}}</el-checkbox>
                </el-checkbox-group>
            </template>
        </div>

全选
```javascript
handleCheckAllChange(val) {
                var checkedsItem = val ? this.shoplist : []
                if (checkedsItem.length > 0) {
                    checkedsItem.map(item => {
                        this.checkboxGroup.push(item.shopid)
                    })
                } else {
                    this.checkboxGroup = []
                }
                console.log(this.checkboxGroup)
                this.isIndeterminate = false;
            },