必须在 table.done 回调中初始化 colorpicker，templet 仅放带 data-value 的容器；done 中遍历 .color-cell 手动 render，并在 change 中通过 data-index 更新 table.cache 对应行数据，避免翻页丢失。
layui table 单元格里直接用 colorpicker 会报错
因为 layui.table 渲染单元格时是纯字符串插值，而 layui.colorpicker 需要真实 dom 节点和生命周期控制，直接在 templet 里写 layui.colorpicker.render(...) 会触发 “cannot read property 'render' of undefined” 或渲染失败。
必须用 table 的 done 回调 + 手动绑定
表格数据加载完、DOM 挂载好之后，才能安全初始化 colorpicker。重点不是“怎么写模板”，而是“什么时候初始化”。
-
templet里只放一个带唯一标识的容器，比如<div class="color-cell" data-value="#39c0ed"></div> - 在
table.render的done回调里，用layui.$查找所有.color-cell，逐个调用colorpicker.render - 每个 colorpicker 的
change回调里，得手动更新对应行的数据（用table.cache或table.updateCell）
注意 colorpicker 初始化参数和事件联动
默认 colorpicker 不支持 inline 模式嵌入表格，必须设 format: 'rgb' 或 'hex' 并关闭面板自动展开，否则点击会撑开表格、错位。
- 关键配置：
predefine: true（启用预设色）、alpha: false（禁用透明度，避免颜色值变复杂）、trigger: '.color-cell' - 别漏掉
change: function(color){ ... }—— 这里要用$(this.elem).closest('tr')找到当前行索引，再更新table.cache对应项的字段值 - 如果表格启用了
height: 'full-xx'或虚拟滚动，done只触发一次，但新加载的行不会自动绑定，需监听scroll或改用rowElem事件（Layui 2.8+ 支持）
示例片段：绑定 + 更新数据
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'name', title: '名称'},
{field: 'color', title: '颜色', templet: '<div class="color-cell" data-value="{{d.color}}"></div>'}
]],
done: function(res, curr, count){
layui.$('.color-cell').each(function(){
let $this = layui.$(this);
let initColor = $this.data('value') || '#1e9fff';
layui.colorpicker.render({
elem: this,
format: 'hex',
predefine: true,
alpha: false,
value: initColor,
change: function(color){
// 找当前行数据对象
let tr = $this.closest('tr');
let index = tr.data('index'); // Layui 自动加的 data-index
if(index != null){
let cache = table.cache['demo'];
cache[index].color = color;
}
}
});
});
}
});
最常被忽略的是：colorpicker 的 change 事件里不更新缓存，翻页或排序后颜色就回退；还有没处理空值导致 data-value 是 undefined，colorpicker 初始化报错。
