Vue實現勾選框全選和局部選擇功能

其實element-UI里有這個插件，但是和需求有點出入，所以就根據<el-checkbox>進行了一些修改，完成了局部和整體勾選關系的一個確立

全局勾選

 <el-checkbox v-model="checked" class="three-button" @change="check()"  >全選</el-checkbox>

局部勾選：這是一個用v-for循環的div的子元素，循環的tableData數組每個對象都包含了一個checked屬性

  <el-checkbox  class="three-button" v-model='item.checked'  style="float:left"></el-checkbox>

 updata生命周期函數

 checkNew(){
               for(let i=0;i<this.tableData.length;i++){
                 if(this.tableData[i].checked==false){
                     this.checked=false
                     return
                 }
             }
             this.checked=true
          }

全局勾選change函數

  check(){
              if(this.checked==true){
                  for(let i=0;i<this.tableData.length;i++){
                      this.tableData[i].checked=true
                  }
              }else{
                   for(let i=0;i<this.tableData.length;i++){
                      this.tableData[i].checked=false
                  }
              }
          },