:
<vue-tree :data="routerList"></vue-tree>
:
<template>
<ul class="vue-tree">
<li :class="["vue-tree-li", item.type == 0 ? "type0" :"type1"]" v-for="(item, index) in data">
<div :class="["children", !item.children ? "forward" : ""]">
<div :class="[item.children && item.children.length > 0 ? "" : "forward"]">
<span :class="[ "arrow-right",item.show ? "arrow-down" : ""]" v-if="item.children && item.children.length > 0"></span>
<el-checkbox v-model="item.checked" @change="checkedBtn(item,index,data)"></el-checkbox>
<span @click="getTrees(item, index)" >{{item.routeName}}</span>
</div>
</div>
<myTree :data="item.children" v-if="item.show"></myTree>
</li>
</ul>
</template>
<script>
export default {
name: "myTree",
props: ["data"],
methods: {
getTrees(item,index) {
this.$set(this.data[index], "show", this.data[index].show === undefined ? true : !this.data[index].show);
},
/*
*
*/
checkedBtn(item, index ,data){
let itemChecked = item["checked"];
if (item["children"] && item["children"].length){
for (let i in item["children"]){
let checked = item["children"][i];
this.$set(this.data[index]["children"][i], "checked", this.data[index]["children"][i]["checked"] === undefined ? true : !this.data[index]["children"][i]["checked"]);
}
} else {
if (this.data[index].checked === undefined){
this.$set(this.data[index], "checked", this.data[index].checked = true);
} else {
this.$set(this.data[index], "checked", this.data[index].checked ? true : false);
}
}
}
}
}
</script> 
the effect you need to achieve is the same as http://element.eleme.io/-sharp/zh-..
I can"t do it now. After all and all, the subset is unchecked and the parent needs to be unchecked.