多租户动态表单核心是字段配置隔离、数据归属明确、权限联动校验。必须将租户上下文贯穿配置读取、渲染、提交、后端校验全链路：字段配置按tenant_id隔离存储并索引；接口自动注入租户上下文，禁止显式传参；redis缓存key含租户标识；前端初始化时固化tenant_id为prop，用于生成唯一字段key并自动填充隐藏字段；提交前校验tenant_id，请求头统一携带x-tenant-id；字段可见性、可编辑性等权限由后端配置驱动，前端动态响应。
在多租户系统中做 Vue 动态表单，核心不是“怎么渲染字段”，而是“字段配置如何隔离、数据如何归属、权限如何联动”。自定义字段如果跨租户混用或共享配置，极易导致 A 租户看到 B 租户的字段，或提交数据写入错误租户库。必须把租户上下文贯穿到配置读取、表单渲染、数据提交、后端校验全链路。
字段配置按租户隔离存储
动态表单的字段元数据（如字段名、类型、是否必填、校验规则）不能放在全局配置表里。必须和租户强绑定：
- 数据库设计：每个字段配置记录带 tenant_id 字段，并建联合索引（如
(form_code, tenant_id)），避免查询时漏加租户条件 - 后端接口：所有获取表单结构的 API（如
/api/forms/:code/fields）必须自动注入当前租户上下文，不接受显式传 tenant_id 参数——防止前端伪造 - 缓存策略：Redis 中缓存的表单配置 key 需包含租户标识，例如
form:apply:v2:tenant_abc123，禁止用通用 key 全局共享
前端渲染时注入租户上下文
Vue 组件本身不感知租户，但表单实例需明确所属租户。建议在初始化表单时就固化租户信息：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 从路由或全局状态（如 Pinia store）中安全读取当前租户 ID，不依赖 URL 参数或 localStorage 手动传入
- 将 tenant_id 作为 prop 透传给动态表单组件，并在每个字段组件内部用于构造唯一字段 key（如
name_${tenant_id}_mobile），避免不同租户间 v-model 冲突 - 隐藏字段（如比赛 ID、门店编码）应由前端根据租户上下文自动填充，而非交由用户输入或后端返回后再赋值——减少中间环节出错可能
提交数据携带租户归属标识
即使表单字段完全一致，A 租户提交的数据也必须严格写入 A 租户的数据表分区。关键控制点：
- 提交前校验：检查 formData 中是否含必需的租户标识字段（如
tenant_id或业务主键中的租户前缀），缺失则阻断提交并提示 - API 请求头：统一在 axios 拦截器中添加
X-Tenant-ID，后端据此做二次校验与数据路由 - 避免“表单字段映射”污染：不要把租户字段当成普通表单项去配置和渲染，它应是基础设施层能力，由框架自动补全
租户级字段权限与可见性控制
同一套表单模板下，不同租户可配置字段的可见性、可编辑性、搜索能力。这需要后端返回的字段配置中明确声明：
-
visible: true/false—— 控制是否渲染该字段 -
editable: 'always' | 'own' | 'never'—— 区分新建/编辑/只读场景 -
searchable: true—— 影响后台列表页是否提供该字段的搜索入口 - 前端不硬编码这些逻辑，全部依据后端返回的字段配置对象动态决定 UI 行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
