Several options share a multi-select button (style modification record)

htm:

<template>
  <div>
	<div>
        <el-button class="sure-btn" @click="selectAll">全选</el-button>
        <el-button class="cancel-btn" @click="selectOther">反选</el-button>
	</div>
    <el-checkbox-group v-model="checkedType" @change="changeCheck">
       <el-checkbox label="1">
       	  <div>大型商品1类<span class="item-info">洗衣机、彩电</span></div>
          <div>大型商品2类<span class="item-info">冰箱、抽油烟机</span></div>
    	</el-checkbox>
    	<el-checkbox label="2">
       	   <div>小型商品1类<span class="item-info">玻璃杯、瓷碗、勺筷</span></div>
           <div>小型商品2类<span class="item-info">毛巾、袜子、手套</span></div>
           <div>小型商品3类<span class="item-info">中性笔、胶带、笔记本</span></div>
     	</el-checkbox>
     </el-checkbox-group>
   </div>
</template>

js:

export default {
    
    
  data(){
    
    
    return {
    
    
      checkedType:[],
      checkedRange:['1','2','3','4','5','6']
    }
  },
  methods:{
    
    
    changeCheck(val){
    
    
      this.checkedType = val;
    },
    selectAll(){
    
    
      this.checkedType = this.checkedRange.map(item => item);
    },
    selectOther(){
    
    
      this.checkedType = this.checkedRange.filter(item => !this.checkedType.some(v => item == v))
    }
 }
}

scss:

.down-check{
    
    	//整体调整
  .el-checkbox{
    
        
    display: inline-block;    //为多选小方块垂直居中做准备
    width:100%;
    .el-checkbox__label{
    
    //文字样式自定义
      font-size:16px;
      color:#1F2325;
      line-height:44px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner{
    
    //选中后，勾选框样式自定义
      background-color:#2B67FF;
      border-color:#2B67FF;
    }
  }
  label.el-checkbox{
    
                   //多选小方块垂直居中
    position:relative;
    span.el-checkbox__input{
    
    
      position:absolute;
      height: 100%;
      display: flex;
      align-items: center;
    }
    span.el-checkbox__label{
    
    
      margin-left:20px;     //多选内容label间距微调
      padding-left:40px;   
    }
  }
}