layui table单元格无法直接设readonly，需在templet中动态渲染input并根据条件添加readonly属性及禁用样式，同时在edit事件中跳过只读单元格。
layui table 的单元格无法直接设 readonly，得靠自定义模板
layui 的 table.render() 渲染后，单元格本质是 <div> 或 <span>，不是表单控件，所以给单元格加 readonly 属性完全无效。真正能生效的，是让该列渲染成 <input> 或 <textarea>，再控制其状态。
- 只读逻辑必须写在
templet中，用 JS 判断条件后决定是否加readonly属性 - 如果列原本是普通文本（比如
templet: '{d.name}'），要改成可编辑输入框，必须显式返回带<input>的 HTML 字符串 - 注意：
event绑定和edit: 'text'模式会干扰手动控制，二者不要混用
用 templet 动态渲染 input 并控制 readonly
这是最可控的方式——绕过 layui 的内置编辑模式，自己拼 DOM。关键点在于：根据某字段值（比如 d.status === 'done'）决定是否加 readonly 和禁用样式。
cols: [[
{ field: 'name', title: '姓名',
templet: function(d) {
var isReadonly = d.status === 'done';
return '<input type="text" value="' + (d.name || '') +
'" class="layui-input" ' +
(isReadonly ? 'readonly style="background:#f5f5f5;cursor:not-allowed;"' : '') +
'>';
}
}
]]
- 必须手动拼
<input>，不能依赖edit: 'text' -
style部分建议加上视觉反馈（如浅灰背景、禁用光标），否则用户看不出只读 - 记得对
d.name做空值处理，避免undefined被转成字符串显示出来 - 若需保留原始表格样式（如居中、边框），需额外补 CSS 类或内联样式
监听编辑事件时跳过只读单元格
即使你用了 templet 渲染了 input，如果还启用了 table.on('edit(...)', ...)，用户点击只读单元格仍可能触发编辑事件——因为 layui 默认捕获所有 input 的 change。
- 在
edit回调里先检查当前单元格是否应只读：if ($(this).attr('readonly')) return; - 更稳妥的做法：给只读 input 加一个自定义 class（如
layui-cell-readonly），然后在事件里用$(this).hasClass('layui-cell-readonly')判断 - 别忘了同步禁用
keydown或focus行为（比如$(this).on('focus', function(){ this.blur(); })）
兼容性与性能注意点
动态生成 input 模板在大数据量下会有轻微性能损耗，且和 layui 自身的编辑校验逻辑不互通。如果你的场景需要服务端校验、错误提示或批量保存，这种“纯前端只读”只是视觉隔离，后端仍需做最终权限校验。
- 超过 2000 行时，避免在
templet中做复杂计算或 DOM 查询 - 不要在
templet里写ajax或异步逻辑，会阻塞渲染 - 如果某些列只读状态依赖接口返回，务必等数据加载完再调用
table.render()，否则d里没有对应字段
最麻烦的其实是样式对齐和焦点管理——layui 的 input 默认有 hover/focus 边框和 padding，而你手写的容易漏掉这些细节，结果看起来像“坏掉的输入框”。
