element + el-checkbox-group 折叠效果

先看效果


html结构

  （点击可展开预览/收起）
  
    {{item.name}}
  

js部分

let checkboxCollapse = ref(true);
const checkboxCollapseFun = () => {
  checkboxCollapse.value = !checkboxCollapse.value;
}

css部分

.control-checkbox-collapse {
	cursor: pointer;
}

.checkbox-group-retract {
	height: 40px;
	overflow: hidden;
}

.checkbox-group-expand {
	height: auto;
}

还可以结合el-collapse 搞下，效果如下

  
    
      {{item.name}}
    
  

const activeName = ref('1');

这个就不需要加样式和js逻辑，看各自需求，择优选择！