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

vue树形菜单的更多相关文章

  1. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  2. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

  3. vue js 实现 树形菜单

    添加一个模板.<template id="menu-template"> <li v-if="model.nodes!=undefined"& ...

  4. Vue.js递归组件实现动态树形菜单

    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...

  5. Vue2 实现树形菜单(多级菜单)功能模块

    结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...

  6. SSH框架CRUD+树形菜单案例

    今天结合了案例来写ssh的增删改查 表设计 t_ssh_tree t_vue_user  book 核心配置文件  struts-base.xml <?xml version="1.0 ...

  7. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  8. JS树形菜单

    超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...

  9. 简单实用的二级树形菜单hovertree

    原创 hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http:/ ...

随机推荐

  1. <<C++ Primer>> 第四章 表达式

    术语表 第 4 章 表达式 算术转换(arithmetic conversion): 从一种算术类型转换成另一种算术类型.在二元运算符的上下文中,为了保留精度,算术转换通常把较小的类型转换成较大的类型 ...

  2. 基于Graylog的容器日志监控

    Docker日志 当一个容器启动的时候,它其实是docker deamon的一个子进程,docker daemon可以拿到容器里面进程的标准输出,然后通过自身的LogDriver模块来处理,LogDr ...

  3. CNN与图像应用

    一.图像识别与定位 0.Classification:C个类别 Input:Image Output:类别标签 Evaluation metric:准确率 1.Localization: Input: ...

  4. Python基础——函数进阶

    等待更新…………………… 后面再写

  5. Redis的频道发布与消息订阅

    Redis的频道发布与消息订阅 官网介绍 进程间的一种通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 订阅/发布消息图 下图展示了频道channel1,以及订阅这个频道的三个客户端-c ...

  6. 目标检测数据库 PASCAL 格式的 Ground Truth 的解析函数

    最近在做一个目标检测算法,训练时用到了 bootstrap 策略,于是我将PASCAL的 Ground Truth 格式的读取函数从 Matlab 改写为 C++.PASCAL 的标注格式为: # P ...

  7. laravel 学习之第一章

    LTS : long time support. download url : http://www.golaravel.com/download/ 第一篇 目录介绍: ​ resource:包含了原 ...

  8. java面试02——基础

    1. JDK . JRE 和JVM有什么区别? JDK:Java Development Kit 的简称,Java 开发工具包,提供了 Java 的开发环境和运行环境. JRE:Java Runtim ...

  9. Codeforces 964 等比数列逆元处理 贪心删偶数度节点

    A B C 注意sum要在mod范围内 且不能用/a*b来推 #include<bits/stdc++.h> using namespace std; typedef long long ...

  10. windows环境下 RabbitMQ 安装时创建用户流程命令

    https://blog.csdn.net/xiaojieblog/article/details/70332469