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

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];}ElementById("demo").innerHTML = text;
}

展示的内容：

;BMW;Volvo;Saab;Ford