实际开发中，如何实现复选框的全选和不选

实际开发中，如何使用ElementUI实现复选框的全选和不选

项目需求：复选框按钮样式实现全选和全不选

前言

本项目是基于，ant-design for Vue的UI库， 是没有按钮样式的多选框组件的，所以引用了ElementUI库的复选框组件

ElementUI的复选框组件使用事项

官网样例如下

注意：官网使用的是：按钮组，无法使用indeterminate属性进行全选全不选的样式控制。
所以不能使用 按钮组来实现按钮样式的 带全选的复选框

官网表明，全选的样式控制 是基于checkbox的，而不是 checkbox-button

最终实现如下：

<template>
    <div id="check-box">
        <el-checkbox  size="small" style="margin-right: 30px;height: 40px;padding: 0px 14.5px;line-height: 40px;" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部({
    {
    total}})</el-checkbox>
        // 这里也必须使用checkbox 才能应用indeterminate属性 
        <el-checkbox-group v-model="checkedTags" @change="handleCheckedCitiesChange">
            <el-checkbox size="small" v-for="tag in tags" :label="tag.id" :key="tag.id" >{
    {
    tag.value}}({
    {
    tag.count}})</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
  export default {
    
    props : ['total','tags'],
    data() {
    
      return {
    
        checkAll: true,
        checkedTags: [],  // 收集的值和label保持一致
        isIndeterminate: true
      };
    },
    watch : {
    
        tags() {
    
            this.checkedTags = this.tags.map(item=>item.id);
        }
    },
    methods: {
    
      handleCheckAllChange(val) {
    
        this.checkedTags = val ? this.tags.map(item=>item.id) : [];
        this.isIndeterminate = false;
        this.$emit('checkedAll',this.checkedTags)
      },
      handleCheckedCitiesChange(value) {
    
        // 这里收集的是el-checkbox label属性值
        this.checkedTags = value;
        this.$emit('checkedItem',this.checkedTags)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.tags.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
      }
    },
    mounted() {
    
        this.checkedTags = this.tags.map(item=>item.id);
    }
  };
</script>
<style scoped>
#check-box {
    
    display: flex;
}
</style>
<style>
.el-checkbox__input {
    
    display: none;
}
.el-checkbox__label {
    
    padding-left: 6px;
}
.el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered {
    
    margin-left: 0px;
}
.el-checkbox {
    
    background: #F2F5F7;
    border-radius: 2px;
    padding: 9.5px 14.5px;
    margin-bottom: 30px;
}
.el-checkbox.is-checked {
    
    background: rgba(64, 140, 255, 0.1);
}
</style>