Bootstrap权限表格应采用语义化结构：thead分组表头，tbody每行用data-permission-key绑定唯一权限标识，checkbox用name映射后端权限码；小屏下改用卡片式布局或下拉权限组，避免横向滚动；提交时仅增量发送变更项，并校验逻辑一致性。
Bootstrap 本身不提供权限管理逻辑，它只负责把表格画得清晰、响应式、可交互；真正的权限控制必须由后端决定字段是否显示、按钮是否禁用、行是否渲染——前端只是安全地呈现后端给的数据。
权限表格的 HTML 结构怎么写才合理
别直接套用 table.table-striped 就完事。权限表格通常要支持：角色列、多级权限勾选（如“用户管理”→“查看/新增/删除”）、状态开关、操作列。结构上建议用 thead 分组表头，用 data-permission-key 给每行绑定唯一权限标识：
<table class="table table-bordered">
<thead>
<tr>
<th>模块</th>
<th>查看</th>
<th>新增</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr data-permission-key="user:list">
<td>用户列表</td>
<td><input type="checkbox" class="form-check-input" name="user:list:view"></td>
<td><input type="checkbox" class="form-check-input" name="user:list:create"></td>
<td><input type="checkbox" class="form-check-input" name="user:list:update"></td>
<td><input type="checkbox" class="form-check-input" name="user:list:delete"></td>
</tr>
</tbody>
</table>
- 每个
input的name要能映射到后端权限码（比如 RBAC 中的user:list:create） - 避免用
id控制单个 checkbox，改用name或data-permission-key批量操作更可靠 - 不要在前端用 JS 动态拼接整张权限表——容易漏掉后端未返回的权限项，导致权限不一致
怎么让权限表格在小屏下不横向滚动
后台权限表字段多，Bootstrap 默认的 .table-responsive 在手机上会强制横向滚动，但用户根本不想拖着看七八列。更实用的做法是折叠操作列 + 垂直堆叠权限项：
- 用
class="d-none d-md-table-cell"隐藏非关键列（如“编辑”“删除”），只在中屏以上显示 - 把“查看/新增/编辑/删除”合并为一个下拉按钮：
<div class="dropdown"> <button class="btn btn-sm dropdown-toggle">权限</button><ul class="dropdown-menu"><li><label><input type="checkbox"> 查看</label></li></ul> </div> - 或者改用卡片式布局：
<div class="card mb-2"> <div class="card-header">用户管理</div> <div class="card-body p-2">...</div> </div>，每模块独立，适配移动端更自然
权限变更后如何安全提交到后端
别用 form.submit() 直接提交整个表格——用户可能只改了 1 个 checkbox，却把所有权限项全发过去，既浪费带宽，又增加并发冲突风险。推荐用增量更新：
- 监听所有
input[type="checkbox"]的change事件，收集checked状态变化的项：if (el.checked) { changed.push(el.name); } - 提交时只发
{ role_id: "admin", permissions: ["user:list:view", "user:list:create"] }，后端做差集更新 - 务必在提交前校验：如果某模块的“新增”被勾选，但“查看”没勾选，应提示用户逻辑矛盾（后端也得做同样校验，前端只是友好提醒）
- 禁用提交按钮并加 loading 状态，防止重复点击——权限变更失败时，页面状态必须可回滚（比如保存前缓存原始值）
最常被忽略的是：权限表格里的“启用/禁用”开关（form-switch）不能只靠视觉样式判断状态，一定要同步设置 value="1" 或 value="0"，否则后端接收不到真实值；还有，所有 checkbox 的 name 必须全局唯一，否则 jQuery 的 $('input[name="xxx"]').serialize() 会丢数据。
