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

问题:

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

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

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

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

过程:

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

详解Vue.js iview实现树形权限表(可扩展表)_第1张图片

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

详解Vue.js iview实现树形权限表(可扩展表)_第2张图片

详解Vue.js iview实现树形权限表(可扩展表)_第3张图片

展示结果如下:

详解Vue.js iview实现树形权限表(可扩展表)_第4张图片        

第二步,添加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)]);
  }
},

展示效果:

详解Vue.js iview实现树形权限表(可扩展表)_第5张图片

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

< template > 

你可能感兴趣的:(详解Vue.js iview实现树形权限表(可扩展表))