根本原因是vue响应式初始化早于layui表格渲染，导致v-model无法监听动态插入的dom；且layui分页与vue数据更新互不触发，需手动调用table.reload()并显式传入page.curr。
为什么 v-model 和 layui 分页一起用就失效
根本原因不是分页组件坏了，而是 Vue 的响应式初始化早于 layui 表格渲染。当你在 table.render() 之前就写了 v-model 绑定表单元素，而这些元素实际是 layui 动态插入的 DOM（比如下拉框、分页控件），Vue 根本没监听到它们——因为它们压根还没存在。
更隐蔽的问题是：layui 分页栏（.layui-laypage）本身不参与 Vue 的 DOM 生命周期，它的点击事件不会触发 Vue 数据更新；反过来，你改了 Vue 数据，layui 也不会自动重绘分页状态。
- 典型现象：表格数据正常加载，但点击“下一页”无反应，或页码显示卡在第 1 页
- 检查控制台 Network，发现
page和limit参数没随点击变化，甚至根本没发新请求 - 如果用了
table.reload()，但没传page.curr，它默认仍从第 1 页开始拉数据
table.reload() 必须显式传 page.curr 才能跳页
别指望点击分页按钮后 Vue 数据自动更新再驱动 reload——layui 分页和 Vue 是两套独立逻辑。要跳页，必须主动调用 table.reload() 并明确指定当前页码。
-
table.reload('myTable', { page: { curr: 3 } })是最直接的方式，curr 必须是数字，不能是字符串"3" - 如果你用
where传参做搜索，记得把page.curr一并带上，否则 reload 后会重置回第 1 页 - 不要在
done回调里又调一次table.reload()，容易覆盖当前页码导致跳页失败 - 如果表格初始化时用了
url，reload 时传data就必须同时设url: ''，否则 layui 会忽略 data 继续走接口
后端返回字段名不匹配会导致分页直接不显示
layui 默认期望后端返回 count 字段表示总条数，但很多项目用的是 total。只要这个字段名对不上，分页控件就不渲染——连 DOM 都不会生成，更别说点击了。
- 检查浏览器 Network → Response，确认返回 JSON 中是否有
count字段，值是否为数字 - 用
response配置做字段映射：response: { countName: 'total' } - 如果后端返回结构是
{ status: 200, data: [...], total: 123 }，还要配parseData提取：parseData: res => ({ count: res.total, data: res.data }) - 注意：2.9.x 版本对
parseData返回结构更严格，count和data缺一不可，且count不能为null或undefined
layer 弹窗里表格分页失效的根源是 DOM 被复制丢事件
常见写法：content: $("#myTableContainer").html() —— 这会把原始 HTML 字符串塞进 layer，所有绑定的事件、layui 实例、Vue 响应式都清零，分页按钮变成死标签。
- 正确做法是传原生 DOM 元素：
content: document.getElementById('myTableContainer') - 或者用
success回调里重新执行table.render()，确保表格在 layer 内真实渲染 - 如果弹窗内容需复用，把
table.render()封装成函数，在每次打开 layer 前调用，而不是靠 HTML 复制 - 别忘了在弹窗的
done回调里重绑 toolbar 事件，否则按钮点击无效
count 字段映射和 url: '' 清空规则，这两处出问题，连分页栏都不会出来。
