几个选项共用一个多选按钮(样式修改记录)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43939111/article/details/130924216

这篇文章展示了如何在Vue.js应用中创建全选和反选功能。通过使用`<template>`、`<el-button>`、`<el-checkbox-group>`等组件，结合`v-model`进行数据绑定和`@click`事件处理，实现了对选项的全选和反选操作。CSS部分则定制了勾选框的样式。

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

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