左右表格联动本质是两个独立bootstrap-table实例的数据通信，需监听左侧选中事件、调用右侧load()刷新，并注意清空旧数据、字段匹配、分页保持及模态框滚动控制。
左右表格间用 getSelections() + load() 同步数据
左右联动不是靠 CSS 或布局实现的，本质是两个独立 bootstrap-table 实例之间的数据通信。最常用、最稳的方式是监听左侧表格的选中事件，拿到数据后调用右侧表格的 load() 方法刷新内容。
常见错误现象：右侧表格没反应、数据重复叠加、分页错乱——基本都是因为没清空旧数据或没传入完整数据集。
- 左侧必须绑定
check.bs.table和uncheck.bs.table事件，不能只监听 click -
getSelections()返回的是数组，即使只选一行也要按数组结构处理 - 右侧调用
load(data)前，建议先执行$('#rightTable').bootstrapTable('removeAll')，避免叠加 - 如果右侧表格启用了分页，
load()会自动重置到第一页；如需保留当前页码，得手动记录并调用selectPage()
左右拖拽移动行时注意 append() 和 remove() 的字段匹配
当用户把左表某行拖进右表，或从右表移回左表，核心操作是 append() 加 remove()，但字段名不一致就会失败。
典型问题：左表字段叫 id，右表对应字段叫 itemId，直接 append(row) 会导致右表渲染异常或排序错乱。
- 移动前检查两表的
columns配置，确保关键标识字段（如 ID）名称和类型一致 -
remove()必须传{ field: 'xxx', values: [...] }，不能只传 id 值；values必须是字符串数组，哪怕只有一个值也要包成[String(id)] - 右表新增行后，若需保持序号列（如
PAIXUXH），得手动计算最大值再 +1，不能依赖原左表序号 - 避免在循环中连续调用
append()，批量操作建议先收集数据，再一次性load()
模态框里放左右双表，要防 modal-body 溢出和滚动冲突
Bootstrap 模态框默认 .modal-body 是普通块级容器，不带滚动控制。左右两个表并排放进去，很容易撑破弹窗、遮挡按钮，或导致整个模态框滚动而非表格局部滚动。
真实踩坑点：加了 overflow-auto 没用，是因为父级 .row 或 .modal-body 没设高度限制，浏览器无法计算滚动区域。
- 给
.modal-body显式设max-height: 60vh（根据实际调整），再加overflow-hidden - 左右两表各自包裹一层
<div class="table-container">，并设 <code>height: calc(60vh - 40px)（预留表头/间距） - 每个
.table-container加overflow-y: auto，确保各自独立滚动 - 禁用
.modal-dialog的max-height，否则可能压缩内容区；改用height: fit-content或固定max-height -
data-query-params必须是函数，例如：data-query-params="queryParams"，并在 JS 中定义window.queryParams = function(params) { return { productId: selectedId }; } - 确保左侧选中逻辑执行早于右侧
refresh()，否则selectedId还是初始值 - 后端返回必须是标准格式：
{ "total": 12, "rows": [...] }，字段名不能是data或list，除非你重写了responseHandler - 调试时打开浏览器 Network 面板，确认请求 URL 中是否含预期参数，响应体是否符合格式
联动时过滤条件没生效？检查 data-query-params 和服务器返回结构
如果右侧表格本该根据左侧选中项动态加载关联数据，但始终显示全部或空数据，大概率是查询参数没传过去，或后端返回格式不匹配。
Bootstrap Table 默认把 data-query-params 当作函数调用，返回的对象会作为 AJAX 请求参数。很多人写成字符串或对象字面量，结果参数根本没发出去。
复杂点在于：左右联动不是单次动作，而是状态持续同步的过程。一旦左侧支持多选、全选、取消，右侧就得能响应增删改；而撤销操作（如 Ctrl+Z）需要额外维护操作栈——这些都不是 Bootstrap Table 自带能力，得自己记快照、做 diff。
