利用Vue+elementUI实现的全选、反选(当子项全部选中的时候全选框中的勾自动打上，子项有一项没有选中全选去掉)

利用Vue+elementUI实现的全选、反选(当子项全部选中的时候全选框中的勾自动打上，子项有一项没有选中全选去掉)

本文通过 https://blog.csdn.net/shenlan18446744/article/details/25008289 该博主的 利用javaScript实现的全选、反选(当子项全部选中的时候全选框中的勾自动打上)给的灵感就是用多选框的长度与选中的长度做对比

先看一下效果

后台返回的数据格式

格式是数组对象包裹数组对象

template

运用两次for循环把内容渲染出来

<el-dialog :title="btnRowName" :visible.sync="permissionsVisible" width="50%">
    <div>
        <el-checkbox v-model="checkAll" @change="checkAllBtn()">全选</el-checkbox>
        <ul>
            <li flex="cross:center" v-for="(item,index) in cities" :key="index">
                <div
                    style="height:30px;line-height:30px;font-size:14px;margin-right:10px;"
                >{{item.MenuName}}</div>
                <div flex>
                    <div
                        :label="items.id"
                        v-for="(items,index) in item.child"
                        :key="index"
                        style="margin-right:10px;"
                    >
                        <el-checkbox
                            v-model="items.isCheck"
                            @change="chchange()"
                        >{{items.Name}}</el-checkbox>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="permissionsVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureCheck()">确 定</el-button>
    </span>
</el-dialog>

javascript

data() {
  return {
      checkAll: false,
      cities: [],
 }
}


// 下面是methods
checkAllBtn() {
     // 全选
     if (this.checkAll == true) {
         for (let i = 0; i < this.cities.length; i++) {
             for (let j = 0; j < this.cities[i].child.length; j++) {
                 this.cities[i].child[j].isCheck = true;
             }
         }
     } else {
         // 全不选
         for (let i = 0; i < this.cities.length; i++) {
             for (let j = 0; j < this.cities[i].child.length; j++) {
                 this.cities[i].child[j].isCheck = false;
             }
         }
     }
 },
 // 点击单个按钮的时候，控制是否是全选或者是不选（有一个没有选中，全选为false）
 chchange() {
     let count=0
     let allCount=0
     let arr=[]
     for(let i = 0; i < this.cities.length; i++){
         allCount=this.cities[i].child.length  
         arr.push(allCount)
         for (let j = 0; j < this.cities[i].child.length; j++) {
             
             if (this.cities[i].child[j].isCheck == true) {
                 count++; //被选中的个数
             }
         }
     }
     let allNum=0
     for(let m=0;m<arr.length;m++){
         allNum+=arr[m]  // 在这里获取到每个子列表的个数
     }
     if(count==allNum){  // 重点 获取到一共的子列表的个数 与 选中的个数做对比（相等就是全部选中）
         this.checkAll =true
     }else{
         this.checkAll =false
     }
 },