Layui table 单元格点击编辑依赖 cell 事件监听，动态插入 input 并聚焦，通过 obj.update() 同步数据源，配合 blur/keydown 事件保存，需处理表头、合并单元格等边界情况。
layui table 单元格点击触发编辑的底层机制
layui 的 table.render() 默认不支持双击或单击直接编辑，它依赖事件代理 + 手动 dom 操作来实现「点击变输入框」。核心不是靠配置项开关，而是监听 tool 或 cell 事件，在对应单元格内动态插入 <input> 并聚焦——否则你改了数据也同步不到表格数据源里。
用 cell 事件监听并替换内容为 input
必须绑定 cell 事件（不是 tool），因为只有它能精准捕获任意单元格点击，并提供 tr、td、field、value 等关键信息：
table.on('cell(test)', function(obj){
var $td = $(obj.tr).find('td').eq(obj.col);
var value = obj.value;
// 防止重复渲染：只在非 input 状态下才替换
if ($td.find('input').length === 0) {
$td.html('<input type="text" class="layui-input" value="' + value + '">');
$td.find('input').focus();
// 失焦后回写值、恢复显示
$td.find('input').one('blur', function(){
var newValue = $(this).val();
obj.update({[obj.field]: newValue}); // 同步到数据源
$td.text(newValue);
});
}
});
- 一定要用
one('blur')，避免多次绑定导致更新多次 -
obj.update()是关键，它会触发重绘并保持分页/排序状态；仅改 DOM 不调这个，翻页后你的修改就丢了 - 如果字段是数字类型，注意
value可能为undefined，建议先|| ''
兼容性与边界问题怎么处理
真实场景中，你很快会遇到这些坑：
- 点击表头、操作列、合并单元格（
rowspan/colspan）会触发异常，加判断：if (obj.col === -1 || !obj.field) return; - 输入框回车没保存？补上
keydown监听：if (e.keyCode === 13) { $(e.target).trigger('blur'); } - 编辑时点击其他行，当前 input 不失焦 → 需全局监听 document click，排除自身 td 后 blur 当前 input
- 使用了
skin: 'line'或自定义样式时，layui-input可能高度不匹配，建议加style="height: 100%; padding: 0 8px;"
要不要封装成可复用的 editCell 方法
可以，但别过度封装。Layui 表格本身不维护编辑态，每次点击都是“现场创建+销毁”，所以一个轻量函数就够了：
function enableCellEdit(tableId, field) {
table.on('cell(' + tableId + ')', function(obj){
if (obj.field !== field) return;
// 后续逻辑同上，只是限定 field
});
}
真正复杂的是校验和异步保存：比如编辑后要发请求验证，失败得回滚 UI。这时候 obj.update() 得包一层 Promise，失败时再手动 $td.text(obj.value) ——这个逻辑没法通用，得按业务写。
