element-ui的树型结构图,半选状态数据给后台后,返回数据带有半选父节点的剔除展示
// html
<h2 class="text-gray">功能权限</h2>
<el-tree
:data="permissionList"
:props="defaultProps"
show-checkbox
node-key="permissionId"
default-expand-all
ref="tree_permissions"
@check="change_permission"
v-if="current_roleId"
></el-tree>
//js 只展示返回数据到渲染的半选数据的父节点的剔除
async find_function_permission_by_roleId(){
this.isLoading = true;
try {
const res = await this.$http.get("scPermission/findScPermissionByRoleId/" + this.current_roleId);
this.selectedPermissionsIds = res.data.data;
// 将只有部分选择子节点的父节点剔除
let arr =[];
let arrLength = 0;
arr = this.selectedPermissionsIds;
arrLength = arr.length;
let array:any = [];
function fun(value:any,data:any,arr:any) {
for( let i = 0;i < data.length;i++){
let mod = data[i];
if(mod.permissionId == value) {
if(mod.children.length == 0){
arr.push(mod.permissionId);
return true
}
return true
}else {
if(mod.children.length != 0) {
fun(value, mod.children, arr);
}
}
}
return true
}
for(let n = 0;n < arrLength;n++) {
fun(arr[n],this.permissionList,array);
}
this.selectedPermissionsIds = array;
let tree_permissions = this.$refs.tree_permissions as Tree;
tree_permissions.setCheckedKeys(this.selectedPermissionsIds);
// 数据加载完之后,修改成行内样式
setTimeout(()=>{
this.$nextTick(()=>{
this.treeChildInline();
});
},50);
} catch (e) {
this.$httpErrorHandle(this, e);
}finally {
this.isLoading = false;
}
},
element-ui的树型结构图,半选状态数据给后台后,返回数据带有半选父节点的剔除展示的更多相关文章
- element-ui的树型结构图,带有复选框的,没有子项的,横排展示
// 修改树形图样式,如果不含有下箭头的块,要变成行内样式 treeChildInline(){ let hasCaretRight = $("#permission_panel" ...
- element ui el-tree回显问题及提交问题(当后台返回的el-tree相关数组的时候,子菜单未全部选中,但是只要父级菜单的id在数组中,那么他的子菜单为全部选中状态)
1:问题原因:我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr);或者使用:default-expanded-keys="treeD ...
- Vue + Element UI 实现权限管理系统 (管理应用状态)
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- PyQt(Python+Qt)学习随笔:树型部件QTreeWidget中的项编辑方法editTriggers、editItem和openPersistentEditor作用及对比分析
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在树型部件QTreeWidget中,有三种方法触发进行项数据的编辑:editTriggers触发编辑 ...
- dedecms添加/编辑文章如何把附加选项去掉默认勾选状态
1.去掉添加时默认勾选状态. 在 系统->系统基本参数->其它选项 中,如图中的三个选项选择否即可. 设置完后可以看到添加时已经默认不勾选,但是编辑文章时还是默认勾选状态. 2.去掉编辑时 ...
- element ui改写实现两棵树
使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- Antd组件Table树型多选全选问题
组件库antd里面的树型选择不能做到勾选父组件然后一起勾选子组件情况,我也不知道是组件库的问题还是原本设计就是这样 刚好组件库存在rowselection的配置项,既然存在拓展方法,又遇到需求,那么就 ...
随机推荐
- SparkSql 数据类型转换
SparkSql 数据类型转换 1.SparkSql数据类型 1.1数字类型 1.2复杂类型 2.Spark Sql数据类型和Scala数据类型对比 3.Spark Sql数据类型转换案例 3.1获取 ...
- HBase性能优化完全版
近期在处理HBase的业务方面常常遇到各种瓶颈,一天大概一亿条数据,在HBase性能调优方面进行相关配置和调优后取得了一定的成效,于是,特此在这里总结了一下关于HBase全面的配置,主要参考我的另外两 ...
- 【有趣的全彩LED | 编程】用STM32 HAL库让WS2812B为你所动
一.效果展示 观看演示效果:https://www.bilibili.com/video/BV1dv411Y7x3 使用STM32 HAL库编程 PWM+DMA控制输出,CubeMX生成初始工程 实现 ...
- Linux下统计CPU核心数量
首先第一步,cat /proc/cpuinfo processor : 0 vendor_id : GenuineIntel cpu family : 6 model : 45 model name ...
- 力扣1423. 可获得的最大点数-C语言
题目 题目链接 几张卡牌 排成一行,每张卡牌都有一个对应的点数.点数由整数数组 cardPoints 给出. 每次行动,你可以从行的开头或者末尾拿一张卡牌,最终你必须正好拿 k 张卡牌. 你的点数就是 ...
- HDU-6703 array (线段树)
题意 一个长度为n的排列a,\(\forall i\in [1,n] ,1\le a_i \le n\) , m次操作,每次操作: (1,pos),把 \(a_{pos}\) 变为\(a_{pos} ...
- POJ-3984 迷宫问题 (BFS)
题意:有一个\(5\)X\(5\)的\(01\)图,输出从左上角走到右下角的最短路径. 题解:基础的bfs,这里困难的是如何输出这个最短路径,我们可以用一个结构体来存点和路径,我们每次向外去拓展的时候 ...
- 升级到WLS2
WLS2相对WSL1有重大改变,其中最重要的是subsystem linux可以说是真正意义上的linux发行版了,当然也提升了i/o性能. 1. 升级windows WSL 2 is only av ...
- BIM技术基础-Revit2019建筑
第三章 三维信息建模(中) 3.5 拉伸屋顶的创建 拉伸屋顶→ 在立面中创建,屋顶的形状在垂直截面上一致的 利用参照平面或者已有的墙面或者已有的轴线 3.5.1利用拾取平面创建 画一个参照平面作为屋檐 ...
- HTTP笔记2--简单的HTTP 协议
HTTP概念 HTTP用于客户端和服务器之间的通信 客户端:请求访问文本或图像等资源的一端 服务器端而提供资源响应的一端 通过请求和响应的交换达成通信 HTTP 协议规定,请求从客户端发出,最后服务器 ...