详解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)]);
}
},另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文题目:详解Vue.jsiview实现树形权限表(可扩展表)-创新互联
新闻来源:http://www.jxjierui.cn/article/doppip.html


咨询
建站咨询
