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'  ></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
                  }
              }
          },