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" 彻底隐藏视觉影响
- 适合搜索表单中“高级筛选项”这类非必填、但位置固定的字段
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
