多选框包含全选!! 操作vue-elementui

最新推荐文章于 2025-04-22 17:28:37 发布

原创最新推荐文章于 2025-04-22 17:28:37 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

VUE 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个基于Vue.js的前端表单中，如何实现站点机台的动态全选与单个选择功能，包括全选/取消全选操作，以及根据用户选择状态调整其他选项的状态。通过checkbox组件和v-model双向数据绑定，实现实时更新和状态切换。

在这里插入图片描述

<el-col :span=24>
     <el-form-item label="站点机台"  style="font-weight:700">
         <el-checkbox-group v-model="form.stationId">
             <el-checkbox v-for="(item,index) in selectList.stationId" :key="index" :label="item" @change="changes(item)"></el-checkbox>
         </el-checkbox-group>
      </el-form-item>
</el-col>

data(){
        return{
          flag:true,// 判断是否有全选 true==无全选    
          form:{
             stationId:[],                  
          },
          selectList:{
            stationId:['全选','1','2','3','4','5','6','7'],
          }
        }
    },
methods(){
     changes(key){
         // 点击全选并且是之前状态为未选
         if(key=='全选'&&this.flag==true){
            this.form.stationId=this.selectList.stationId;  
            this.flag=false;
            return;
         }
         // 点击全选并且是之前状态为已全选
         if(key=='全选'&&this.flag==false){
             this.form.stationId=[]; 
             this.flag=true;
             return;
         }
         // 点击其他（之前状态为未选），未选择全选
         if(this.flag&&this.form.stationId.length==(this.selectList.stationId.length-1)){
             this.form.stationId=this.selectList.stationId;
             this.flag=false;
             return;
         }
         // 点击其他（之前状态为已选），已选择全选
         if(this.flag==false){
            this.remove("全选",this.form.stationId);
            this.flag=true;
              console.log(this.form)
             return;
         }
     },
     indexOf(val,arr){
          for(var i = 0; i < arr.length; i++){
            if(arr[i] == val){return i;}
       }
      return -1;
    },
    remove(val,arr){
       var index = this.indexOf(val,arr);
       if(index > -1){arr.splice(index,1);}
     },
}