<强>问题:
需要一个可折叠的权限管理系统,用表格展示。
主要用的iView组件库,有表(表格),树(树形控件),崩溃(折叠面板)看起来比较符合意思
深入查看表相关范例,发现有个,通过给,<代码> ,列数据设置一项,指定,<代码>类型:“扩大”>
但也只是展开详细内容,如需树形结构,则需要呈现自定义去渲染,挺麻烦的。再去看看UI元素,也没有什么比较好的选择。
<>强过程:
<强>第一步,先构建根节点的数据表,后台返回JSON数据解析(www.json.cn)基本如下
前面2个对象和第三个结构基本类似,将数据注入authlist,匹配listcolumns展示
展示结果如下:
,,,,,,,,
<强>第二步,强添加列的扩展扩大功能,在listcolumns里添加
listcolumns: [{
标题:“序”号,
关键:“_index”,
名称:“index_css”,
呈现:(h, params)=祝辞{
返回h (" div " [h(“跨度”{
风格:{
显示:“inline-block”,
宽度:100%,
溢出:“隐藏”,
textOverflow:“省略”,
空白:“nowrap "},
textAlign:“中心”
}
},
params.row._index)]);
}
},
{//添加的扩张
类型:“扩大”,
宽度:20,
呈现:(h, params)=祝辞{
返回h (expandRow, {
风格:{
填充:0
},
道具:{
行:params.row
}
}）
}
},
{
标题:“权限名称”,
关键:“标题”,
名称:“Title_css”,
省略号:没错,
呈现:(h, params)=祝辞{
返回h (" div " [h(“跨度”{
风格:{
显示:“inline-block”,
宽度:100%,
溢出:“隐藏”,
textOverflow:“省略”,
空白:“nowrap '}
}
},
params.row.Title)]);
}
},
展示效果:
<强>第三步: authtable_expand.vue子组件,基本和父组件的表一致
& lt;模板比;
& lt;表条纹:加载="加载":showHeader=false边界:列=發istcolumns”:数据=" https://www.yisu.com/zixun/listauth "风格=皁verflow-y:隐藏;max-height: 522 px;“比;& lt;/Table>
& lt;/模板比;
& lt;脚本比;
从“. ./组件/导入expandRow authtable_expand.vue”;
出口
默认的{
道具:(“行”),
数据(){
返回{
加载:假的,
listcolumns:(//listcolumns暂不展示
),
listauth: []
}
},
安装(){},
方法:{},
创建(){//控制台。日志(“authotable_expend创建:“+ JSON.stringify (this.row.children))
var=this.row.children对象;
控制台。日志(“身份验证数据:扩张”+ JSON.stringify(对象)this.listauth.splice(0)对象。forEach (r=祝辞{
this.listauth.push(右)
}）//控制台。日志(“listauth:“+ JSON.stringify (this.listauth))
}
}
& lt;/script>
& lt;风格lang=吧佟北?
td.ivu-table-expanded-cell {
填充:0;
}
& lt;/风格比;之前
注意,添加td.ivu-table-expanded-cell{填充:0;},可以是扩展部分内容充满全部,展示效果如下
在expand.vue里递归调用自身,可以逐级扩展
目前在Vue。js的2个主要的前端组件iView和ElementUI都暂时没有看到合适的可扩展的树形表,只有自己编写相关组件来实现。相信以后应该都会有的,就像之前iView多表头都没有,后面也终于添加了。
