Vue 3 动态表单通过配置层解耦权限与显隐逻辑，字段配置声明 permissionCode 或 requiredRole，computed 动态过滤 visibleFields，模板遍历渲染并自动绑定 v-model，提交前需二次过滤并服务端强校验。

Vue 3 中动态表单根据权限隐藏字段，核心是把「权限判断」和「字段显隐逻辑」解耦到配置层，再由响应式系统驱动渲染，而不是硬编码 if-else。

字段配置中声明权限标识

在表单配置（如 formConfig 数组）中为每个字段添加权限字段，例如 permissionCode 或 requiredRole：

• permissionCode: 'user:edit:email' —— 对应后端分配的细粒度权限码
• requiredRole: ['admin', 'super'] —— 指定哪些角色可查看该字段
• 也可复用已有字段如 isshow: true，由权限校验逻辑统一控制其最终值

用 computed 动态过滤可见字段

不直接在模板里写 v-if="hasPermission('xxx')"，而是预先计算出当前用户能看的字段列表：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

• 定义 currentUserRoles 或 userPermissions（从 pinia/store 或登录态获取）
• 用 computed 返回 filteredFields：

const visibleFields = computed(() => {
  return formConfig.filter(field => {
    // 方式1：按权限码匹配
    if (field.permissionCode) {
      return userPermissions.value.includes(field.permissionCode);
    }
    // 方式2：按角色白名单
    if (field.requiredRole) {
      return field.requiredRole.some(r => currentUserRoles.value.includes(r));
    }
    return true; // 默认显示
  });
});

模板中只遍历 visibleFields

模板不再对每个字段单独做权限判断，而是直接基于计算结果渲染：

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

• v-for="field in visibleFields" 保证 DOM 中只存在有权限的字段
• 配合 v-model="formData[field.name]" 自动绑定，无需额外处理数据合法性
• 提交时 formData 天然只含用户有权操作的字段（前提是未手动注入禁用字段）

补充：字段级权限需联动业务逻辑

仅隐藏 UI 不够，还要防止绕过前端提交非法字段：

• 提交前用相同权限规则再次过滤 formData（服务端仍需强校验）
• 若某字段隐藏后，其关联校验（如必填、格式）也应失效，可在校验逻辑中加入 field in visibleFields 判断
• 对于“只读但可见”的场景，可用 :disabled="!hasPermission(field.permissionCode)" 替代隐藏