问题:
需要一个可折叠的权限管理系统, 用表格展示.
主要用的 iView 组件库, 有 Table(表格),Tree(树形控件),Collapse(折叠面板)看起来比较符合意思
深入查看 Table 相关范例, 发现有个 通过给 columns 数据设置一项, 指定 type: 'expand', 即可开启扩展功能 可以考虑
但也只是展开详细内容, 如需树形结构, 则需要 render 自定义去渲染, 挺麻烦的. 再去看看 element UI, 也没有什么比较好的选择.
过程:
第一步, 先构建根节点的数据表, 后台返回 JSON 数据解析 ( http://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)]);
- }
- },
- {
- // 添加的 expand
- type: '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 序号未按总序号排列
预期结果应该类似于:
来源: http://www.jb51.net/article/148286.htm