vue树形权限菜单_vue树形菜单

vue树形菜单

由于项目原因，没有使用ui框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。

html代码

js代码直接调用api 把请求到的数据直接赋值给permissions就可以了，这里不多说。直接说最重要的部分，点击checkbox 把id传给后台 并实现全选，反选。

全选，反选

curry(e,node){

if (e.target.checked) {

node.subDetail.forEach((sub, i)=>{

node.subDetail[i].checked =true;

})

}else{

node.subDetail.forEach((sub, i)=>{

node.subDetail[i].checked =false;

})

}

},

通过v-model的数据双向绑定这一属性，对对后台返回的checked这一字段做判断，当点击一级菜单checked为true时，把二级菜单的checked也赋值为true 就可以实现全选反选。

点击菜单添加id给后台

watch:{

permissions: {

deep: true,

immediate: true,