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

时间:2021-05-25

问题:

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

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

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

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

过程:

第一步,先构建根节点的数据表,后台返回JSON数据解析(ponents/authtable_expand.vue';exportdefault { 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序号未按总序号排列

预期结果应该类似于:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章