Vue.js iview实现树形权限表(可扩展表)

本文介绍了如何使用 Vue.js 和 iView 组件库创建一个可折叠的权限管理系统,通过Table和Tree功能结合,实现树形权限表。在iView的Table中利用expand属性开启扩展功能,并在子组件authtable_expand.vue中递归渲染实现多级扩展。尽管目前iView和ElementUI尚无现成的解决方案,但作者提供了实现思路和改进方向。
摘要由CSDN通过智能技术生成

问题:

        需要一个可折叠的权限管理系统,用表格展示。

        主要用的iView组件库,有Table(表格),Tree(树形控件),Collapse(折叠面板)看起来比较符合意思

        深入查看Table相关范例,发现有个 通过给 columns 数据设置一项,指定 type: 'expand',即可开启扩展功能  可以考虑

        但也只是展开详细内容,如需树形结构,则需要render自定义去渲染,挺麻烦的。再去看看element UI,也没有什么比较好的选择。

过程:

        第一步,先构建根节点的数据表,后台返回JSON数据解析(www.json.cn)基本如下

        前面2个object和第三个结构基本类似,将数据注入authlist,匹配listcolumns展示

评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值