Layui表格怎么实现在表头的右侧添加一个自定义配置图标

Layui table 表头右侧加配置图标需自定义列 title 为 HTML 字符串并绑定事件委托;title 要双层转义,用 data-field 标识列,图标点击须用 (document).on('click', 'th .layui-icon-set', ...) 获取 field 并查列配置。layui table 表头右侧加配置图标,本质是改 toolbar 渲染位置Layui 的 table 默认只支持在表格顶部(toolbar 区域)或每行右侧(cols 中的 toolbar 模板)放按钮,表头单元格右侧没有原生 API。所谓"表头右侧",实际是指某个列标题末尾插入图标,比如「姓名」列标题后面加个 ??。这得靠自定义列标题(title 配置为 HTML 字符串)+ 手动绑定事件实现。不能直接用 toolbar: true,它只作用于表格顶部工具栏,和表头无关title 字段支持 HTML,但必须提前转义风险字符(如 \<、\>),否则被过滤图标点击后若需操作当前列(比如排序开关、显示隐藏控制),得靠 data-field 属性或列索引定位用 title 写 HTML + data-field 标识列在列配置中把 title 设为带图标的 HTML 字符串,并确保该列有唯一 field 值,方便后续事件处理。注意:Layui 会自动对 title 做一次 escape,所以得用双层转义或改用 unshift 后手动注入(更稳妥)。推荐写法:title: '姓名\\'必须加 style="cursor:pointer",否则鼠标悬停无反馈,用户不知道可点data-field 值要和列的 field 一致,避免后期查列配置时对不上图标用 layui-icon 类,别用外部 SVG 或 img,否则样式不统一、缩放错位图标点击事件必须用事件委托绑定因为表头是表格初始化时动态生成的,直接 ('spandata-field').on('click') 会失效。必须挂到 table 容器或 document 上,用事件委托。 跃问 跃问是由阶跃星辰开发的免费AI智能问答助手,随时帮你智能搜索、高效阅读、识图理解、和你畅聊感兴趣的话题。

相关推荐
guodingdingh4 小时前
软件开发工作问题总结0718
java·开发语言·数据库
GuWenyue6 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
想会飞的蒲公英7 小时前
计算机怎样读取中文文本:编码、清洗与标准化
人工智能·python·自然语言处理
Miao121318 小时前
某海外住宿平台如何在大规模场景下实现指标一致性:Minerva 指标平台实践
大数据·数据库·人工智能
SeaTunnel8 小时前
从 Python Script 地狱到标准化数据集成框架
大数据·开发语言·python·程序员·代码·seatunnel
CodexDave8 小时前
MySQL事务隔离级别与MVCC机制解析
前端·数据库·mysql·nginx·性能优化·负载均衡
深度研习笔记8 小时前
OpenCV工业视觉实战09|项目EXE打包+工控机无环境部署+后台常驻运行,彻底脱离Python环境,完成项目最终交付
python·opencv·webpack
碎光拾影8 小时前
ARM交叉工具链各工具作用及IMX6ULL平台LED+蜂鸣器裸机程序实现
java·开发语言·数据库
曾阿伦8 小时前
MongoDB 查询语句备忘手册
数据库·mongodb
一叶龙洲8 小时前
wslg打开Ubuntu24.04默认打开图形界面
linux·服务器·数据库·ubuntu