// 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. (一)Spring Boot 常用注解

    文章目录 一.注解(annotations)列表 二.注解(annotations)详解 三.JPA注解 四.SpringMVC相关注解 五.全局异常处理 @ExceptionHandler(Exce ...

  2. 五:SpringBoot-多个拦截器配置和使用场景

    SpringBoot-多个拦截器配置和使用场景 1.拦截器简介 1.1 拦截器中应用 2.拦截器用法 2.1 编写两个拦截器 2.1.1 OneInterceptor 拦截器 2.1.2 TwoInt ...

  3. 深信服上网行为管理配置跨三层MAC识别

    1.在认证高级选项里点击新增 如果PC的IP和MAC存在于多个三层交换机,则需新增多个. 点击上图"查看服务器信息"测试能否从交换机获取PC的IP和MAC,有返回结果则能正常获取, ...

  4. HTML之form表单标签的学习

    from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...

  5. xls与csv文件的区别

    CSV是文本文件,用记事本就能打开.XLS 是二进制的文件只有用 EXCEL 才能打开:CSV 文件格式只能保存活动工作表中的单元格所显示的文本和数值.XLS 中所有的数据行和字符都将保存.数据列以逗 ...

  6. Educational Codeforces Round 67 E.Tree Painting (树形dp)

    题目链接 题意:给你一棵无根树,每次你可以选择一个点从白点变成黑点(除第一个点外别的点都要和黑点相邻),变成黑点后可以获得一个权值(白点组成连通块的大小) 问怎么使权值最大 思路:首先,一但根确定了, ...

  7. 2019牛客多校 Round1

    Solved:4 Rank:143 A Equivalent Prefixes 题意:求一个最大的r满足在A,B两个数组中1,r里所有的子区间RMQ相等 题解:单调队列秒 #include <b ...

  8. Atcoder ABC161 A~E

    传送门 A - ABC Swap 1 #include <iostream> 2 #include <cstdio> 3 #include <cstring> 4 ...

  9. kubernetes实战-交付dubbo服务到k8s集群(四)使用blue ocean流水线构建dubbo-demo-service

    使用jenkins创建一个新的项目:dubbo-demo,选择流水线构建 勾选保存构建历史和指定项目为参数化构建项目: 添加构建参数:以下配置项,是王导根据多年生产经验总结出来的甩锅大法: 除了bas ...

  10. 网络之一次http请求的完整过程

    关于网络的知识平时可能真正用的比较少,但是有一些点还是需要总结的: 完成一次http请求要大致可以分为7个步骤: 一.TCP三次握手 第一次握手:建立连接.客户端发送连接请求报文段,将SYN位置为1, ...