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 推进数组里面存起来,注意的是,一定要在前面把数组清空,这样可以防止,多次重复点击所造成的数据重复。
以上所说纯属个人观点,欢迎大家提出宝贵的建议,如有雷同,请不要怼我。
vue树形菜单的更多相关文章
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- vue js 实现 树形菜单
添加一个模板.<template id="menu-template"> <li v-if="model.nodes!=undefined"& ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- Vue2 实现树形菜单(多级菜单)功能模块
结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...
- SSH框架CRUD+树形菜单案例
今天结合了案例来写ssh的增删改查 表设计 t_ssh_tree t_vue_user book 核心配置文件 struts-base.xml <?xml version="1.0 ...
- jQuery 树形菜单
树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...
- JS树形菜单
超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...
- 简单实用的二级树形菜单hovertree
原创 hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http:/ ...
随机推荐
- <<C++ Primer>> 第四章 表达式
术语表 第 4 章 表达式 算术转换(arithmetic conversion): 从一种算术类型转换成另一种算术类型.在二元运算符的上下文中,为了保留精度,算术转换通常把较小的类型转换成较大的类型 ...
- 基于Graylog的容器日志监控
Docker日志 当一个容器启动的时候,它其实是docker deamon的一个子进程,docker daemon可以拿到容器里面进程的标准输出,然后通过自身的LogDriver模块来处理,LogDr ...
- CNN与图像应用
一.图像识别与定位 0.Classification:C个类别 Input:Image Output:类别标签 Evaluation metric:准确率 1.Localization: Input: ...
- Python基础——函数进阶
等待更新…………………… 后面再写
- Redis的频道发布与消息订阅
Redis的频道发布与消息订阅 官网介绍 进程间的一种通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 订阅/发布消息图 下图展示了频道channel1,以及订阅这个频道的三个客户端-c ...
- 目标检测数据库 PASCAL 格式的 Ground Truth 的解析函数
最近在做一个目标检测算法,训练时用到了 bootstrap 策略,于是我将PASCAL的 Ground Truth 格式的读取函数从 Matlab 改写为 C++.PASCAL 的标注格式为: # P ...
- laravel 学习之第一章
LTS : long time support. download url : http://www.golaravel.com/download/ 第一篇 目录介绍: resource:包含了原 ...
- java面试02——基础
1. JDK . JRE 和JVM有什么区别? JDK:Java Development Kit 的简称,Java 开发工具包,提供了 Java 的开发环境和运行环境. JRE:Java Runtim ...
- Codeforces 964 等比数列逆元处理 贪心删偶数度节点
A B C 注意sum要在mod范围内 且不能用/a*b来推 #include<bits/stdc++.h> using namespace std; typedef long long ...
- windows环境下 RabbitMQ 安装时创建用户流程命令
https://blog.csdn.net/xiaojieblog/article/details/70332469