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,

handler(val) {

this.form.cPermissionIds = [];

this.form.cDetailIds = [];

val.forEach(menu => {

if (menu.checked) {

this.form.cPermissionIds.push(menu.cPermissionId);

};

menu.subDetail.forEach(sub => {

if (sub.checked) {

this.form.cDetailIds.push(sub.cDetailId);

};

});

});

},

},

},

通过监听permissions的数据变化 当checkbox被选中，checked为true时把checkbox所对应的id 推进数组里面存起来，注意的是，一定要在前面把数组清空，这样可以防止，多次重复点击所造成的数据重复。

以上所说纯属个人观点，欢迎大家提出宝贵的建议，如有雷同，请不要怼我。