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智能问答助手,随时帮你智能搜索、高效阅读、识图理解、和你畅聊感兴趣的话题。

相关推荐
wespaul11 分钟前
VeapAI 自然语言操作实战|第 05 篇:向量与召回——从知识条目到可检索资产
大数据·数据库·人工智能·milvus
IT_Octopus5 小时前
【零基础入门 LLM 开发 · Day 13】:LangChain 的对话记忆——Message 对象版
人工智能·python·langchain
一只鹿鹿鹿5 小时前
政务外网整体设计方案(PPT)
大数据·数据库·web安全·系统安全·流程图·政务
2603_965148116 小时前
社区与学习资源:从入门到精通的API选品学习路径
数据库·人工智能·python·学习·数据挖掘
AI砖家6 小时前
安全进入 Agent Loop:2027 年 Coding Agent 的决胜点
数据库·安全·codex·vibecoding
wangqiaowq6 小时前
SQL server C盘空间占满的处理
数据库·sql
文人sec6 小时前
SQL基础入门笔记 | 从零基础到掌握核心查询语句
数据库·笔记·sql
数字新视界6 小时前
机房动环监控提升运维效率
大数据·服务器·数据库·动环监控系统·动力与环境监控系统
SelectDB技术团队6 小时前
冷热分层从建到验:Storage Policy 创建、表级与分区级绑定、SHOW TABLETS 验证的完整命令
大数据·数据库·elasticsearch·搜索引擎·数据分析·apache doris·冷热分层
欣栀♡7 小时前
JVM 频繁 Full GC 先看日志括号里的 cause,jstat 的 FGC 在 JDK 8 上会骗人
java·jvm