问题：

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

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

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

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

过程：

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

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

展示结果如下：

第二步，添加Columns的扩展expand功能，在listcolumns里添加

listcolumns: [{title: '序号',key: '_index',className: 'index_css',render: (h, params) => {return h('div', [h('span', {style: {display: 'inline-block',width: '100%',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap',textAlign: 'center'}}, params.row._index)]);    }},{  //添加的expandtype: 'expand',width: 20,render: (h, params) => {return h(expandRow, {style:{padding: 0},props: {row: params.row}})}},{title: '权限名称',key: 'Title',className: 'Title_css',ellipsis:true,render: (h, params) => {return h('div', [h('span', {style: {display: 'inline-block',width: '100%',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'}}, params.row.Title)]);    }},

展示效果：

第三步：authtable_expand.vue子组件，基本和父组件的Table一致

<template><Table stripe :loading="loading" :showHeader=false border :columns="listcolumns" :data="listauth" style="overflow-y: hidden;max-height: 522px;"></Table>
</template><script>import expandRow from '../components/authtable_expand.vue';export default{props:['row'],data(){return{loading: false,listcolumns: [//listcolumns暂不展示],listauth:[]}},mounted(){},methods:{},created(){//console.log("authotable_expend created: " + JSON.stringify(this.row.children))var object = this.row.children;console.log("auth expand data:" + JSON.stringify(object))this.listauth.splice(0)object.forEach(r=>{this.listauth.push(r)})//console.log("listauth:" + JSON.stringify(this.listauth))}}
</script><style lang="less">td.ivu-table-expanded-cell{padding:0;}
</style>

注意，添加td.ivu-table-expanded-cell{padding:0;}，可以是扩展部分内容充满全部，展示效果如下

在expand.vue里递归调用自身，可以逐级扩展

总结：

目前在Vue.js的2个主要的前端组件iView和ElementUI都暂时没有看到合适的可扩展的树形表，只有自己编写相关组件来实现。相信以后应该都会有的，就像之前iView多表头都没有，后面也终于添加了。

此外，自定义组合树形权限表还有部分功能没有完善，如：

1如果当前节点没有子节点，就不应该出现扩展的按钮

2扩展按钮最好按照树的深度逐渐向后移动

3序号未按总序号排列

预期结果应该类似于：

写在后面2020.01.07：

这个样式和功能设计是以前iView和elementUI没有类似组件的时候，自己参照EasyUI自行设计的方法，细节问题比较多，现在可以可以参照ElementUI的树形数据，网址树形数据

同时，EasyUI也有vue.js的重写，欢迎大家使用，表格功能更加强大。

Vue.js iview实现树形权限表（可扩展表）相关推荐

oracle创建表空间扩展表空间文件修改表空间自动增长
1. 创建表空间 create tablespace SIRM2 datafile 'D:\oracle\product\10.2.0\oradata\orcl\SIRM2.dbf' size 10 ...
html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决
筹备工作 //借助插件 npm install babel-plugin-import --save-dev // .babelrc { "plugins": [["im ...
vue.js iView组件官网
转载:https://www.iviewui.com/components/tree Basic.Form.View.Navigation.Chart.Other Basic: Grid 栅格. Gr ...
.NET Core + JWT令牌认证 + Vue.js 通用动态权限(RBAC)管理系统框架[DncZeus]开源啦！！！...
DncZeus 前言关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯, ...
开源干货！.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源
DncZeus 前言关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯, ...
python通用权限管理框架图_开源干货！.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源...
DncZeus 前言关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯, ...
开源干货！.NET Core + JWT令牌认证 + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源
DncZeus 前言关于 DncZeus DncZeus = Dnc + Zeus "Dnc"–.Net Core 的缩写: "Zeus"–中文译为宙斯,是古 ...
前端清单之Vue.js篇
2019独角兽企业重金招聘Python工程师标准>>> 教程实践基于 Vue 与 DeepStream 构建实时 CRUD 应用:Vue 是专注于 JavaScript UI 的渐 ...
《Vue.js实战》读书笔记
嗯,加油啦!!都是书里的东西,整理了一下,以后复习的时候看. 电子档资源见评论摘些最近看书的句子: 迪安却不一样,他为了面包和性爱在社会上使劲打拼. 我不知道自己究竟是谁了,我远离家乡,旅途劳顿,疲 ...

Vue.js iview实现树形权限表（可扩展表）

问题：

过程：

总结：

写在后面2020.01.07：

Vue.js iview实现树形权限表（可扩展表）相关推荐

最新文章

热门文章