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 推动数组里面存起来，注意的是，必定要在前面把数组清空，这样能够防止，屡次重复点击所形成的数据重复。
以上所说纯属我的观点，欢迎你们提出宝贵的建议，若有雷同，请不要怼我。