Vue checkbox 处理有层级关系的元素

准备实现这样一个功能，如图选中一级步骤，所有的子级步骤都选中，取消选中一级步骤，所有的 子级步骤都取消选中

 其中一级步骤是li元素，二级步骤是li中的ul下的li，代码结果大致如下：

 <ul v-for="(step,index) in operate_steps" :key="index" class="list-group text-ul">
            <li class="ol-list list-group-item" :class="checkd_oper_steps.indexOf(step.id)!=-1?'list-group-item-success':''">
             
              <span class="oper_title">{{step.name}}</span>
                <el-checkbox @change="oper_check(step)" class="oper_check_box" :label="step.id" v-model="checkd_oper_steps">完成请勾选</el-checkbox>
                 <i class="oper_check_icon el-icon-check" style=""></i>
              <ul v-if="step.children">
                   <li v-for="(sub_step,index2) in step.children" :key="index2"  class="ol-list list-group-item" :class="checkd_oper_steps.indexOf(sub_step.id)!=-1?'list-group-item-success':''">
                      <span class="oper_title">{{sub_step.name}}</span>
                      <el-checkbox  @change="oper_check(sub_step)" class="oper_check_box" :label="sub_step.id" v-model="checkd_oper_steps">完成请勾选</el-checkbox>
                  </li>
              </ul>
              </li>
        </ul>

checkbox绑定的变量checkd_oper_steps是在组件中申明的变量

 export default {
       name:"Catelog",
       data(){
           return{
               checkd_oper_steps:[]
           }
       },

checkbox中的:label绑定的值，在选中后自动赋值到checkd_oper_steps（v-model中绑定的变量），若checkd_oper_steps是数组的话，则是自动作为元素加入到checkd_oper_steps中。

 checkbox 的@change="oper_check(step)"绑定的函数oper_check，主要处理的是：若是加入操作，判断加入的元素节点是否有子节点，有的话，子节点也加入；若是取消操作，判断取消的元素节点是否有子节点，有的话，子节点取消。

 oper_check(step){
           let index=this.checkd_oper_steps.indexOf(step.id)

           if(index!=-1&&step.children){
              for(let i=0;i<step.children.length;i++){
                this.checkd_oper_steps.push(step.children[i].id)
              }
           }else{
             if(step.children){
              for(let i=0;i<step.children.length;i++){
                let index=this.checkd_oper_steps.indexOf(step.children[i].id)
                this.checkd_oper_steps.splice(index,1)
              }
           }}

 

注意，若对数组使用for/in,取的是数组的下标

function myFunction() {
    var cars = ["BMW", "Volvo", "Saab", "Ford"];
    var i,j;
	var text="";
    for (i in cars) {
          text =text+";"+ cars[i];

    }
    document.getElementById("demo").innerHTML = text;
}

展示的内容：

;BMW;Volvo;Saab;Ford