详解Vue.jsiview实现树形权限表（可扩展表）
问题：
网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了秀屿免费建站欢迎大家使用！
需要一个可折叠的权限管理系统，用表格展示。
主要用的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)]);
}
},
{
//添加的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 >