Vue + Element UI 后台管理系统搭建总结

项目背景

最近在做一个企业后台管理系统，前端用 Vue 2 + Element UI，需要支持动态菜单、角色权限控制和表格数据管理。这篇文章记录搭建过程中的关键设计。

动态菜单与路由

不同角色的用户看到的菜单不一样。后端返回菜单树，前端过滤后动态注册路由：

// router/index.js
export function generateRoutes(menuList) {
  const routes = menuList.map(item => {
    const route = {
      path: item.path,
      component: () => import(`@/views${item.component}`)
    }
    if (item.children && item.children.length) {
      route.children = generateRoutes(item.children)
    }
    return route
  })
  // 用 router.addRoutes 动态添加
  router.addRoutes(routes)
}

按钮级权限控制

用自定义指令 v-permission 控制按钮的显示隐藏。后端返回当前用户的权限码列表，前端根据码判断：

// directives/permission.js
Vue.directive('permission', {
  inserted(el, binding) {
    const permissions = store.state.user.permissions
    if (!permissions.includes(binding.value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

// 使用
删除
编辑

表格组件的封装

管理系统中表格用得最多，每次写一堆列配置很烦。封装一个 CommonTable 组件，通过配置生成表格和分页：

// 使用时只需传入列配置和数据

columns 配置支持自定义渲染、排序、宽度等，减少 80% 的重复代码。

避坑记录

1. router.addRoutes 后要重新生成 sidebar 菜单，不然不更新
2. 权限指令用 removeChild 移除 DOM 比 v-if 更彻底
3. Element UI 的 table 组件在数据量大时要开虚拟滚动
4. 动态路由的 404 页面必须放在最后注册，不然会拦截其他路由