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;
}
}
}