// 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的树型结构图,半选状态数据给后台后,返回数据带有半选父节点的剔除展示的更多相关文章

  1. element-ui的树型结构图,带有复选框的,没有子项的,横排展示

    // 修改树形图样式,如果不含有下箭头的块,要变成行内样式 treeChildInline(){ let hasCaretRight = $("#permission_panel" ...

  2. element ui el-tree回显问题及提交问题(当后台返回的el-tree相关数组的时候,子菜单未全部选中,但是只要父级菜单的id在数组中,那么他的子菜单为全部选中状态)

    1:问题原因:我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr);或者使用:default-expanded-keys="treeD ...

  3. Vue + Element UI 实现权限管理系统 (管理应用状态)

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

  4. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  5. PyQt(Python+Qt)学习随笔:树型部件QTreeWidget中的项编辑方法editTriggers、editItem和openPersistentEditor作用及对比分析

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在树型部件QTreeWidget中,有三种方法触发进行项数据的编辑:editTriggers触发编辑 ...

  6. dedecms添加/编辑文章如何把附加选项去掉默认勾选状态

    1.去掉添加时默认勾选状态. 在 系统->系统基本参数->其它选项 中,如图中的三个选项选择否即可. 设置完后可以看到添加时已经默认不勾选,但是编辑文章时还是默认勾选状态. 2.去掉编辑时 ...

  7. element ui改写实现两棵树

    使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...

  8. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  9. Antd组件Table树型多选全选问题

    组件库antd里面的树型选择不能做到勾选父组件然后一起勾选子组件情况,我也不知道是组件库的问题还是原本设计就是这样 刚好组件库存在rowselection的配置项,既然存在拓展方法,又遇到需求,那么就 ...

随机推荐

  1. 理解前端模块概念:CommonJs与ES6Module

    前言 现代前端开发每时每刻都和模块打交道.例如,在项目中引入一个插件,或者实现一个供全局使用组件的JS文件.这些都可以称为模块. 在设计程序结构时,不可能把所有代码都放在一起.更为友好的组织方式时按照 ...

  2. Linux 文件搜索神器 find 实战详解,建议收藏!

    大家好,我是肖邦,这是我的第 10 篇原创文章. 在 Linux 系统使用中,作为一个管理员,我希望能查找系统中所有的大小超过 200M 文件,查看近 7 天系统中哪些文件被修改过,找出所有子目录中的 ...

  3. java调用shell脚本执行操作

    //定时清空 日志 String shellString = "sh /home/jyapp/delete_log.sh"; Process process = Runtime.g ...

  4. BZOJ1150 [CTSC2007]数据备份Backup 链表+小根堆

    BZOJ1150 [CTSC2007]数据备份Backup 题意: 给定一个长度为\(n\)的数组,要求选\(k\)个数且两两不相邻,问最小值是多少 题解: 做一个小根堆,把所有值放进去,当选择一个值 ...

  5. poj 3278 Catch That Cow(记忆化广度优先搜索)

    题意: 0到N的数轴上,每次可以选择移动到x-1,x+1,2*x,问从n移动到k的最少步数. 思路: 同时遍历三种可能并记忆化入队即可. Tips: n大于等于k时最短步数为n-k. 在移动的过程中可 ...

  6. CodeForces 1119D(差分+前缀和+二分)

    题意:给你一个数组,数组每次每个数都+1,有q次查询每一查询+L到+R中出现的所有不重复的数字个数. +L到+R其实就相当于是0到+(R-L+1) 感觉自己写的好啰嗦,直接上代码加注释: 1 #inc ...

  7. 牛客小白月赛28 J.树上行走 (并查集,dfs)

    题意:有\(n\)个点,\(n-1\)条边,每个点的类型是\(0\)或\(1\),现在让你选一个点,然后所有与该点类型不同的点直接消失,问选哪些点之后,该点所在的联通块最大. 题解: 因为选完之后两个 ...

  8. Codeforces #640 div4 F~G (构造二连弹)

    题意:求一个只由\(01\)组成的字符串,使得它所有长度为\(2\)的子串满足:每对子串的数字和为\(0,1,2\)的个数为\(a,b,c\). 题解:我们先考虑子串数字和为\(1\)的情况,构造出一 ...

  9. poj 2566 Bound Found 尺取法

    一.首先介绍一下什么叫尺取 过程大致分为四步: 1.初始化左右端点,即先找到一个满足条件的序列. 2.在满足条件的基础上不断扩大右端点. 3.如果第二步无法满足条件则到第四步,否则更新结果. 4.扩大 ...

  10. 牛客编程巅峰赛S1第11场 - 黄金&钻石 A.牛牛的01游戏 (模拟栈)

    题意:有一个\(01\)串,两个相邻的\(0\)可以变成一个\(1\),两个相邻的\(1\)可以直接消除,问操作后的字符串. 题解:数组模拟栈直接撸,上代码吧. 代码: class Solution ...