项目结构大致如此
页面大致如此
讲一讲实现过程中的难点
主要就是角色权限模块 看图
结构就不说了，用的组件就是element中的el-table，el-table-column，el-card这些组件，具体的样式搭配啥的看自己需求
对，还有分配权限，看图
渲染展示数据，获取这些角色名称，这些就是写好组件，发送请求，获取到循环渲染上面
主要难点就是这些三级权限
通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中
就类似这种 getLeafKeys (node, arr) {
// 如果当前 node 节点不包含 children 属性，则是三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach(item => this.getLeafKeys(item, arr))
},
看图 结构以及逻辑
好了，先到这吧！