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 推进数组里面存起来，注意的是，一定要在前面把数组清空，这样可以防止，多次重复点击所造成的数据重复。
以上所说纯属个人观点，欢迎大家提出宝贵的建议，如有雷同，请不要怼我。