vue+element 动态加载数据，checkbox实现全选，不全选

 效果图：

功能描述： 图中所展示数据，全是从服务器获取的数据动态加载，实现点击全选，不全选，加粗字体为父节点，后面为子节点。

数据结构：

[
    {
        "children": [
            {
                "children": [
                    {
                        "incode": "202",
                        "isdist": 0,
                        "remark": "yzzd",
                        "value": "一轴制动"
                    },
                    {
                        "incode": "203",
                        "isdist": 0,
                        "remark": "ezzd",
                        "value": "二轴制动"
                    },
                    {
                        "incode": "204",
                        "isdist": 0,
                        "remark": "szzd",
                        "value": "三轴制动"
                    },
                    {
                        "incode": "205",
                        "isdist": 0,
                        "remark": "sizzd",
                        "value": "四轴制动"
                    },
                    {
                        "incode": "206",
                        "isdist": 0,
                        "remark": "wzzd",
                        "value": "五轴制动"
                    },
                    {
                        "incode": "207",
                        "isdist": 0,
                        "remark": "lzzd",
                        "value": "六轴制动"
                    }
                ],
                "isdist": 0,
                "value": "各轴制动"
            },
            {
                "children": [
                    {
                        "incode": "225",
                        "isdist": 0,
                        "remark": "yzjzzd",
                        "value": "一轴加载制动"
                    },
                    {
                        "incode": "226",
                        "isdist": 0,
                        "remark": "ezjzzd",
                        "value": "二轴加载制动"
                    },
                    {
                        "incode": "227",
                        "isdist": 0,
                        "remark": "szjzzd",
                        "value": "三轴加载制动"
                    },
                    {
                        "incode": "228",
                        "isdist": 0,
                        "remark": "sizjzzd",
                        "value": "四轴加载制动"
                    },
                    {
                        "incode": "229",
                        "isdist": 0,
                        "remark": "wzjzzd",
                        "value": "五轴加载制动"
                    },
                    {
                        "incode": "230",
                        "isdist": 0,
                        "remark": "lzjzzd",
                        "value": "六轴加载制动"
                    }
                ],
                "isdist": 0,
                "value": "加载制动"
            },
            {
                "children": [
                    {
                        "incode": "209",
                        "isdist": 0,
                        "remark": "zyd",
                        "value": "左远灯"
                    },
                    {
                        "incode": "210",
                        "isdist": 0,
                        "remark": "zfd",
                        "value": "左副灯"
                    },
                    {
                        "incode": "211",
                        "isdist": 0,
                        "remark": "zjd",
                        "value": "左近灯"
                    },
                    {
                        "incode": "212",
                        "isdist": 0,
                        "remark": "yyd",
                        "value": "右远灯"
                    },
                    {
                        "incode": "213",
                        "isdist": 0,
                        "remark": "yfd",
                        "value": "右副灯"
                    },
                    {
                        "incode": "214",
                        "isdist": 0,
                        "remark": "yjd",
                        "value": "右近灯"
                    }
                ],
                "isdist": 0,
                "value": "灯光"
            },
            {
                "children": [
                    {
                        "incode": "216",
                        "isdist": 0,
                        "remark": "wg",
                        "value": "外观"
                    },
                    {
                        "incode": "217",
                        "isdist": 0,
                        "remark": "dt",
                        "value": "动态"
                    },
                    {
                        "incode": "218",
                        "isdist": 0,
                        "remark": "jt",
                        "value": "静态"
                    },
                    {
                        "incode": "222",
                        "isdist": 0,
                        "remark": "lszd",
                        "value": "路试制动"
                    },
                    {
                        "incode": "223",
                        "isdist": 0,
                        "remark": "lszc",
                        "value": "路试驻车"
                    },
                    {
                        "incode": "224",
                        "isdist": 0,
                        "remark": "lscsb",
                        "value": "路试车速表"
                    }
                ],
                "isdist": 0,
                "value": "PDA功能"
            },
            {
                "children": [
                    {
                        "incode": "201",
                        "isdist": 0,
                        "remark": "lz",
                        "value": "轮重"
                    },
                    {
                        "incode": "208",
                        "isdist": 0,
                        "remark": "zczd",
                        "value": "驻车制动"
                    },
                    {
                        "incode": "215",
                        "isdist": 0,
                        "remark": "qlch",
                        "value": "前轮侧滑"
                    },
                    {
                        "incode": "219",
                        "isdist": 0,
                        "remark": "csb",
                        "value": "车速表"
                    },
                    {
                        "incode": "220",
                        "isdist": 1,
                        "remark": "zbzl",
                        "value": "整备质量"
                    },
                    {
                        "incode": "221",
                        "isdist": 0,
                        "remark": "wkcc",
                        "value": "外廓尺寸"
                    }
                ],
                "isdist": 0,
                "value": "整车"
            }
        ],
        "value": "安检检测项目"
    },
    {
        "children": [
            {
                "children": [
                    {
                        "incode": "307",
                        "isdist": 0,
                        "remark": "wg",
                        "value": "外观检测"
                    },
                    {
                        "incode": "308",
                        "isdist": 0,
                        "remark": "obd",
                        "value": "OBD检测"
                    },
                    {
                        "incode": "309",
                        "isdist": 0,
                        "remark": "hbgc",
                        "value": "环保过车"
                    }
                ],
                "isdist": 0,
                "value": "通用"
            },
            {
                "children": [
                    {
                        "incode": "304",
                        "isdist": 0,
                        "remark": "sds",
                        "value": "双怠速"
                    },
                    {
                        "incode": "305",
                        "isdist": 0,
                        "remark": "wtgk",
                        "value": "稳态工况"
                    },
                    {
                        "incode": "306",
                        "isdist": 0,
                        "remark": "stgk",
                        "value": "简易瞬态工况"
                    }
                ],
                "isdist": 0,
                "value": "汽油车"
            },
            {
                "children": [
                    {
                        "incode": "301",
                        "isdist": 0,
                        "remark": "yd",
                        "value": "滤纸式烟度"
                    },
                    {
                        "incode": "303",
                        "isdist": 0,
                        "remark": "jzjs",
                        "value": "加载减速"
                    },
                    {
                        "incode": "302",
                        "isdist": 0,
                        "remark": "btgyd",
                        "value": "不透光烟度"
                    }
                ],
                "isdist": 0,
                "value": "柴油车"
            }
        ],
        "value": "环检检测项目"
    }
]

页面代码： 采用三层循环，依次加载显示视图。

<el-card class="box-card" v-for="card in options">
        <div slot="header" class="clearfix">
          <span>{{ card.value }}</span>
        </div>
        <div class="text item" v-for="(item,index) in card.children">

          <el-row :gutter="24" style="margin-bottom: 5px;margin-top: 5px">
            <el-col :span="4">
              <el-checkbox
                style="margin: 0;"
                :false-label="0"
                :true-label="1"
                v-model="item.isdist"
                @change="checked=>handleCheckAllChange(checked,item.children)"
                class="labs"><b>{{ item.value}}</b></el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-checkbox
                style="margin: 0;"
                :false-label="0"
                :true-label="1"
                :key="items.incode"
                v-model="items.isdist"
                v-for="items in item.children"
                @change.native="leftSelected()"
                class="labs">{{ items.value}}</el-checkbox>
            </el-col>
          </el-row>

        </div>
</el-card>

实现效果代码：

 //实现组内全选和不全选
      handleCheckAllChange(val,row) {
        if(val=='1'){
          row.forEach(item => {
            this.$set(item, 'isdist', 1);
          })
        }else{
          row.forEach(item => {
            this.$set(item, 'isdist', 0);
          })
        }

      },

如果保存时，数据结构为    202,203,204,205,206,207,220；那么可以在保存事件触发时，获取到所有勾选的选项,代码如下：

 this.abilityincode = '';
        this.options.forEach(element =>{
          element.children.forEach(item =>{
            item.children.forEach(itemt=> {
              if(itemt.isdist === 1){
                this.abilityincode += itemt.incode+',';
              }
            });
          })
        });
 this.abilityincode =this.abilityincode.substring(0,this.abilityincode.length-1);

到此，小功能完成。注意   :false-label="0"    :true-label="1"   上图代码中"0"或者"1"，可以为1或者0，或者true或false，取决于服务器返回的数据。

---

记录：计算属性

v-model="red[index]"

computed: {                                  //分组名数据值的设置
  red() {                                    //v-model="red[index]" red：计算函数  index传某组的第几个
    let statusArr = new Array();
    this.options.forEach(item=>{
      item.children.forEach(items=> {
        let status = 1;
        items.children.forEach(itemt=> {
          if(itemt.isdist === 0) {
            status = 0;
          }
        });
        statusArr.push(status);
      });
    });
    console.log(JSON.stringify(statusArr))  //[1,0,0,0,0,0,0,0,0,0,0,0,0,0]
    return statusArr;
  }
}