问题：

需要一个可折叠的权限管理系统，显示在表格中。

主要的iView组件库有Table、Tree和Collapse，看起来更符合含义

深入查看表相关示例，发现可以通过为列数据设置一个项并指定type: 'expand '来考虑

但只扩展细节。如果需要树形结构，就需要自定义渲染来渲染，相当麻烦。再看元素UI，没有更好的选择。

流程：

第一步是建立根节点的数据表，后台返回JSON数据分析(www.json.cn)，基本如下

前两个对象基本上类似于第三个结构，将数据注入authlist以匹配listcolumns显示

显示结果如下：

第二步是添加Columns的扩展扩展函数，并将其添加到listcolumns中

list column 3360[{ title : ' serial number '，key :' _ index '，类名：' index _ CSS '，render 3360 (h，params)={return h ('div '，[h ('span '，{ style : { display : ' inline-block '，width: '100% '，overflow: 'hidden '，textOverflow: '省略号'，whiteSpace:}}，{//expanded type:' expand '，width: 20，render: (h，params)={ return h(expanded row，{ style : { padding 3360 0 } 0，Prosp : { row : params }。row}})}}，{title: '权限名'，key:' title '，classname 3360' title _ CSS '，省略号3360 true，render3360 (h，params)={ return h('div '，[h('span '，{ style: { display: '内联块'，width 3360 ' 100% '，overflow: '隐藏'，textOverflow: '省略号'，white}}，显示效果：

第三步：authTable_expand.vue子组件与父组件的表基本相同

Table template stripe : loading=' loading ' : show header=false border : columns=' list columns ' : data=' list auth ' style=' overflow-y : hidden；max-height : 522 px；/Table/template脚本从expandRow导入'./components/auth table _ expand . vue '；export default { prop :[' row ']，data(){ return { loading : false，listcolumns3360 [//listcolumns将不显示]，listauth3360 []}，mounted () {}，methods: {}，created(){//console . log(' authotable _ expand create d : ' JSON . stringify(this . row . Childers))var object=this . row . children；console . log(' auth expand data : ' JSON . stringify(object))this . listaush . splice(0)object . foreach(r={ this . listaush . push(r)})//console . log(' listaush : ' JSON . stringify(this . listaush))}/script style lang=' less ' TD . ivu-table-expand-cell { padd :0；}/样式备注，添加TD。ivu-table-扩展单元格{ padding :0}，可以是扩展部分内容满满，显示效果如下

在expand.vue中递归调用自身可以逐步扩展

总结：

目前Vue.js的两个主要前端组件，iView和ElementUI，暂时还没有看到合适的可扩展树表，只能编写相关的组件来实现。相信以后会有，就像之前iView没有很多标题一样，不过后来终于加了。

此外，自定义组合树权限表的部分功能还不够完善，如：

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

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

3序列号不是按照总序列号排列的

预期结果应该类似于：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。