必须配置列的 edit 字段才能触发编辑态,如 edit: 'text';含 templet 的列 edit 失效;移动端建议用 event: 'click';编辑完成通过 table.on('edit(filter)') 捕获,数据存于 table.cache 中。
必须配置列的 edit 字段,否则点击不会触发编辑态——这是最常被忽略的前提,不是绑事件就能改。
列配置里没写 edit,点击就只是点击
layui 表格默认所有单元格都是只读的。哪怕你给 td 绑了 click 或 dblclick,也进不了编辑态,因为底层根本没渲染 input。
-
edit: 'text'渲染普通文本框;edit: 'number'带数字校验和上下箭头 - 如果该列用了
templet(比如加图标、按钮),edit会直接失效——渲染权交给你了,layui 不再接管 - 移动端双击易被识别为缩放或选中文本,建议统一用
event: 'click',2.7+ 支持 - 示例列配置:
{field: 'name', title: '姓名', edit: 'text', event: 'click'}
table.on('edit(filter)') 是唯一可靠的数据捕获入口
编辑完成后(失焦、回车、点其他单元格),触发的是这个事件,不是 cellClick 或 rowDouble。
- 回调参数
obj包含field、value、oldValue和整行数据obj.data - 原始传入的
data数组不会变,最新值只存在table.cache['your-filter']中 - 想手动更新某行某字段:
table.cache['user'][rowIndex].name = '新名字' - 服务端分页场景下,编辑完必须主动发请求保存,layui 不自动同步
想单击进编辑,但又怕误触?注意这几点
单击比双击更易触发,但也更容易点错位置,尤其在有操作列、固定列、序号列的表格里。
- 确保目标
td有data-field属性——没有说明该列没走 layui 渲染逻辑(比如templet里漏写了) - 别在
templet返回的 HTML 里加lay-event或其他 click 触发器,会和编辑冲突 - 如果表格启用了
height: 'full-xx',动态插入的input可能被裁剪,给td加style="position: relative"更稳 - 移动端真机测试时,确认
<meta name="viewport">没禁用缩放,否则 click 可能延迟 300ms 导致体验卡顿
真正难的不是写几行代码,而是每次点击都要准确识别字段、定位缓存、同步视图、处理失焦——尤其当表格开启分页、搜索、固定列后,data-field 和真实列索引很容易对不上。


















