layui的端增表格渲染，用的加修是它自己那套`table.render()`。改数据？端增很多人第一反应是弹个layer.prompt，或者干脆弄个隐藏的加修input。但真正用过的端增人都知道，这玩意儿一旦牵扯到动态行、加修异步刷新，端增代码就开始发臭。加修我见过最离谱的端增写法，是加修把整个表格的HTML用jQuery拼出来再塞回去，那性能，端增啧啧，加修页面直接卡成PPT。端增

其实要改得干净，加修关键就一句话：**别碰DOM，端增去碰数据源**。layui的表格数据都存在`table.cache[表格id]`里，你改了那个数组，再调`table.render()`重载，页面就跟着变了。举个例子，你有个操作列，里面绑了个按钮，点击事件里拿到当前行的`data`对象。别犹豫，直接改这个对象的字段值，比如`data.status = '已审核'`，然后`table.reload('tableId', { data: table.cache['tableId']})`。完事。页面刷新，数据是新的，排序、分页状态也还在，不用你手动去维护那些乱七八糟的行索引。

但这里有个坑，很多人没注意到。`table.cache`里的数据，是渲染时深拷贝过的。你如果直接改原始的`data`对象，比如是从接口拿回来的那个全局数组，表格里根本不会变。必须得改缓存里的那份。所以写代码的时候，别图省事，老老实实从`table.cache`里把那一行揪出来改。还有个偷懒的小技巧，你可以在操作列的`templet`里放一个``，用`lay-event`监听值变化，然后实时把值同步到缓存里。这样连保存按钮都省了，失焦即保存，体验还挺顺滑。

再谈谈新增。新增的逻辑比修改绕一点，因为你要处理的是“假数据”和“真数据”的边界。很多人喜欢直接`table.reload`塞一条空记录进缓存，但这样分页会乱，而且用户一刷新就没了。我的做法是，弹出一个表单的layer层，填完点确定，把数据`push`进`table.cache`，再重载。但注意，如果表格是开启了分页的，新数据应该插到第一页，不然用户填完还得翻页去找，那体验就崩了。你可以先`unshift`进缓存数组，再切到第一页，或者干脆重载时指定`page: { curr: 1}`。

还有一种更野的路子，适合那种数据量不大、又不想走后端接口的内部工具页。直接把表格的数据源绑定成一个本地数组，用`layui`的`table.render`加载。然后增删改，全是对这个数组的操作，最后统一`table.reload`。省去了请求的等待，页面响应快得飞起。代价是刷新页面数据就没了，但那种场景下，用户自己心里有数，就是个临时编辑工具而已。

最后说个我踩过的坑。表格里如果用了`templet`来渲染操作按钮，比如``，那事件绑定得用`table.on('tool(表格id)')`来监听。但如果你在`templet`里直接写`onclick="myFunction()"`，那不好意思，layui的表格重载之后，这个全局函数还能用，但作用域里的数据已经变了，拿到的永远是第一行的数据。所以啊，老老实实用`lay-event`，然后在监听里通过`obj.data`拿当前行，这才是正路。

改代码这事，最怕的就是绕。绕来绕去，最后自己都看不懂。layui虽然老，但它的设计思路其实挺直接的——你给它数据，它给你表格。你改数据，它就改表格。别把它当成一个需要伺候的DOM框架，把它当一个数据渲染器，思路就通了。