Layui表格实现点击列复制整行需用table.on('tool')事件代理并配置event属性，通过obj.data获取原始数据；复制文本应优先用navigator.clipboard.writeText()，降级使用临时textarea方案，避免DOM解析和JSON序列化错误。
点击列触发整行数据复制的实现逻辑
Layui 表格本身不提供「点击某列复制整行」的内置功能，必须手动绑定事件 + 提取 data 对象。关键在于：不能只监听 td 或 th 的 click，而要利用 Layui 渲染后自动添加的 lay-event 属性或通过 table.on('tool') 事件代理，否则容易拿不到当前行的原始数据。
用 table.on('tool') 绑定列点击并获取整行数据
这是最稳妥的方式——把目标列定义为工具列（即使它不显示图标），Layui 会自动注入行数据到回调参数中。需要在列配置里加 templet 和 event，并在监听时用 obj.data 拿到整行原始对象。
示例列配置：
[{
field: 'copy',
title: '操作',
width: 100,
templet: '<div><span class="layui-btn layui-btn-xs">复制整行</span></div>',
event: 'copy-row'
}]
监听代码：
table.on('tool(test)', function(obj){
if(obj.event === 'copy-row'){
const row = obj.data;
const text = JSON.stringify(row, null, 2);
copyTextToClipboard(text); // 自定义复制函数
}
});
如何安全地复制文本到剪贴板
直接用 document.execCommand('copy') 在现代浏览器已弃用且常失败；推荐用 navigator.clipboard.writeText()，但要注意它只在安全上下文（HTTPS 或 localhost）下可用，且需用户交互触发（比如 click）。
简单可靠的复制函数写法：
- 先创建临时
<textarea>并设为不可见，避免焦点干扰 - 写入内容后选中，再执行
document.execCommand('copy')作为降级方案 - 对
navigator.clipboard.writeText做try/catch，失败时回退
示例：
function copyTextToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
} else {
fallbackCopy(text);
}
}
function fallbackCopy(text) {
const ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'absolute';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
常见坑：点击后复制内容为空或格式错乱
典型原因是：误用了 DOM 节点的 innerText（丢失字段名）、或没处理 undefined/null 值导致 JSON.stringify 报错、或复制了渲染后的 HTML 字符串而非原始 data。
务必检查以下几点：
- 确认你读的是
obj.data，不是$(this).closest('tr').text() - 避免对含循环引用的对象直接
JSON.stringify（Layui 行数据一般不会，但自定义扩展字段可能有） - 如果需要纯文本（非 JSON），用
Object.values(row).join('\t')更适合粘贴到 Excel - 移动端 Safari 对
navigator.clipboard支持有限，fallback 方案必须存在
整行复制看似简单，真正稳定运行的关键在于：始终信任 obj.data，绕过所有 DOM 解析路径，且 clipboard 操作必须包裹在用户触发的事件回调里。
