用 computed 实现动态按钮渲染的关键是将角色到按钮可见性的映射转为响应式、可复用、易维护的计算逻辑，通过独立权限映射表、响应式角色读取、Set 高效判断及固定字段布尔对象，实现模板零冗余控制。
用 computed 实现动态按钮渲染，关键是把「角色 → 按钮可见性」的映射变成响应式、可复用、易维护的计算逻辑，而不是在模板里堆 v-if="role === 'admin' || hasPermission('edit')" 这类硬编码判断。
定义清晰的权限映射表
把角色和按钮操作的对应关系抽成常量对象，避免散落在各处：
- 比如
create、edit、delete、export是通用操作标识，不绑定具体文字或组件 - 映射表建议放在独立文件（如
permissions.ts），方便多处 import：
admin: ['create', 'edit', 'delete', 'export'],
operator: ['create', 'edit', 'export'],
viewer: ['export']
};
后续增删角色或操作，只改这里，不碰业务组件。
从状态中安全读取用户角色
角色必须是响应式的，否则 computed 不会重新执行：
- 若用 Pinia，直接取
store.user.role并包裹在computed中 - 若角色来自异步登录接口，确保它被正确赋值到响应式对象里（例如
ref或reactive），而不是普通变量 - 多角色场景下（如
['operator', 'auditor']），需先扁平化合并权限，再生成可见性对象
用 computed 生成布尔配置对象
这个对象就是模板里的“开关总控”：
- 结构保持固定字段（
create、edit等），值为true/false - 内部用
includes或Set.has判断，性能好且语义清晰 - 支持 fallback：当角色未定义或无匹配权限时，默认全
false，更安全
const role = userRole.value;
const permissions = Array.isArray(role)
? new Set(role.flatMap(r => BUTTON_PERMISSIONS[r] || []))
: new Set(BUTTON_PERMISSIONS[role] || []);
return {
create: permissions.has('create'),
edit: permissions.has('edit'),
delete: permissions.has('delete'),
export: permissions.has('export')
};
});
模板中直接解构使用，零冗余
不需要每个按钮都写一遍判断逻辑，也不用传 props 或调方法：
<button v-if="buttonVisible.create">新增</button><el-button v-if="buttonVisible.delete" type="danger">删除</el-button>- 配合自定义指令（如
v-has="'edit'"）可进一步封装，但computed方案已足够轻量可靠
整个过程不依赖额外库，不增加运行时开销，且天然支持 Vue 的响应式更新链路。
