Vue动态表单通过字段配置项的permission属性与统一权限校验函数解耦显隐控制，支持字符串/数组权限标识、通配符匹配及层级判断，并在自定义组件内自动注入权限上下文实现响应式渲染。

Vue 动态表单中控制表单项的显隐，核心是把权限判断逻辑与表单配置项解耦，并在渲染时实时响应用户权限变化。不是靠硬编码 v-if，而是让每个字段配置自带权限标识，由统一机制决定是否渲染。

表单项配置里声明权限标识

每个表单项（如 input、select、date-picker）在 formItemConfig 数组中定义时，就带上 permission 字段：

• permission: 'user:create.name' —— 字符串权限码，对应后端分配的最小粒度权限
• permission: ['user:read', 'org:manage'] —— 多权限取并集（需全部满足）或交集（满足其一即可），取决于校验函数设计
• 不写 permission 字段，默认始终显示；写但校验不通过，则自动跳过渲染

用权限校验函数统一控制显隐

封装一个 hasPermission(perm) 工具函数，从 Pinia store 或 provide/inject 获取当前用户权限列表，做字符串匹配或白名单比对：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 支持通配符，如 'user:*' 匹配所有 user 开头的权限
• 支持层级判断，'user:profile:email' 可被 'user:profile:*' 覆盖
• 在 el-form-item 的 v-if 中直接调用：v-if="item.permission ? hasPermission(item.permission) : true"

避免重复传参，组件内部自动注入权限上下文

把权限判断下沉到自定义表单组件（如 FreeForm.vue）内部，而不是每个父组件都手动传 permissions：

立即学习“前端免费学习笔记（深入）”；

• 组件 setup 中通过 useUserStore() 或 inject('auth') 拿到权限状态
• formItemConfig 作为 prop 接收，组件只负责“按配置渲染”，不关心权限从哪来
• 权限变更时（如切换角色），store 触发响应式更新，表单项自动重新计算显隐

保留布局稳定性的备选方案

某些场景下隐藏字段会导致表单错位或按钮跳动，可用 v-show + 透明占位 替代 v-if：

• 给 el-form-item 加 :style="{ visibility: hasPermission(item.permission) ? 'visible' : 'hidden', height: hasPermission(item.permission) ? 'auto' : '0' }"
• 配合 label-width="0" 和 style="margin: 0; padding: 0" 彻底隐藏视觉影响
• 适合搜索表单中“高级筛选项”这类非必填、但位置固定的字段