正确做法是修改原始data数组后调用table.reloaddata()刷新；空行对象字段须与cols中field严格一致，且layui 2.8+才支持该方法。
点击按钮后表格如何动态插入空行
直接用 table.reload() 会清空现有数据，不适合“追加空行”；正确做法是修改原始数据源（即传给 table.render() 的 data 数组），再调用 table.reloaddata() 或重新渲染。
- 确保你用的是 Layui 2.8+，
table.reloadData()才支持局部刷新（旧版只能table.reload()全量重载） - 不要操作 DOM 行元素（如
$('tbody').append(...)），Layui 表格的分页、排序、选中状态都会失效 - 空行数据结构必须和原列配置一致：比如有
username、email、status三列，就 push 一个{ username: '', email: '', status: '' }对象 - 如果启用了
page: true，新增空行默认出现在第一页末尾；若当前不在第一页，需手动跳转或设置page: { curr: 1 }
如何绑定按钮并安全追加空行
按钮点击事件里，先拿到表格实例对应的原始数据数组（推荐存在闭包或模块变量中），再 push() 空对象，最后触发刷新。别用 table.config.data —— 它是只读副本。
let tableData = [
{ id: 1, username: 'admin', email: 'a@b.c' },
{ id: 2, username: 'user', email: 'u@b.c' }
];
<p>table.render({
elem: '#demo',
data: tableData,
cols: [[
{ field: 'username', title: '用户名' },
{ field: 'email', title: '邮箱' }
]]
});</p><p>// 按钮点击事件
document.getElementById('add-row-btn').onclick = function() {
tableData.push({ username: '', email: '' });
table.reloadData(); // Layui 2.8+
};</p>
- 如果表格初始化时用了
url和method，说明走的是服务端分页，此时不能直接改前端data数组，得发请求新增后再拉全量/增量数据 -
table.reloadData()不会重置当前页码，但新增行可能让当前页显示不全，可加done: function(res, curr, count) { if (curr * limit > count) table.reload({ page: { curr: Math.ceil(count / limit) } }); }自动翻页
为什么新增后编辑框不生效或校验失败
空行字段值为 '' 或 undefined 时，某些自定义工具条模板（如含 lay-event="edit" 的按钮）或 templet 函数可能因判空逻辑出错，导致点击无响应或表单校验报 Cannot read property 'xxx' of undefined。
- 所有
templet函数里，对字段访问必须加保护：例如return d.username || '';而不是直接d.username - 如果用了
form.on('submit(...)')绑定新增行表单，确保每行表单name属性唯一（可用索引拼接，如name="username_0"），否则提交时只取到最后一个值 - 空行的
id字段若参与后续保存，务必设为临时唯一标识（如Date.now() + Math.random()），避免和服务端主键冲突
兼容性与性能注意点
当表格已有上千行时，频繁 push() + reloadData() 会导致卡顿，尤其在低配设备上。这不是 Layui 的 bug，而是 DOM 重绘成本高。
- 单次最多追加 5–10 行，避免用户狂点按钮造成堆积；可用节流或禁用按钮 300ms 防连点
- 如果业务允许，把空行做成“编辑态占位”，即点击“新增”后，只在当前页底部显示一行带输入框的静态
<tr>，填完再真正 push 到数据并刷新 —— 这样体验更轻量<li>Layui 2.7 及以下不支持 <code>table.reloadData()，必须用table.reload({ data: tableData })，注意这会丢失当前排序、筛选状态
最易被忽略的是：空行的字段名必须和列 field 完全一致，大小写、下划线都不能错；少一个字段，整行可能渲染为空白或报错。
