vue element-ui多选框按钮全选（笔记）

小嘿哈嘿哈

于 2021-12-10 11:29:57 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： elementui 前端

本文链接：https://blog.csdn.net/qq_46631555/article/details/121851316

笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用el-switch和el-checkbox-group实现数据同步与状态管理，通过handleCheckAll和handleChecked方法，当全选框被切换时，动态更新checkbox列表的状态，反之亦然。

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

在这里插入图片描述

 <el-col :span="12">
                    <el-switch
                      v-model="checkAll"
                      @change="handleCheckAll"
                    >
                    </el-switch>
                  </el-col>
                  <el-col :span="24">
                    <el-checkbox-group
                      @change="handleChecked"
                      v-model="checked"
                    >
                      <el-checkbox-button
                        v-for="(item, index) in hylbOptions"
                        :key="index"
                        :label="item.name"
                      >
                        {{ item.name }}
                      </el-checkbox-button>
                    </el-checkbox-group>
                  </el-col>

 data() {
    return {
      checkAll: false,
      checked: [],
      name: [],
      }
    }

methods: {
    handleCheckAll(val) {
      this.name = [];
      for (let i = 0; i < this.hylbOptions.length; i++) {
        this.name[i] = this.hylbOptions[i].name;
      }
      this.checked = val ? this.name : [];
    },
    handleChecked(value) {
      this.checked = value;
      let checkedCount = value.length;
      this.checkAll =checkedCount != 0 && checkedCount == this.name.length;
    },
  }