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

相关推荐
云祺vinchin5 分钟前
中小企业备份软件选型从恢复需求到总体成本评估
数据库·数据备份·中小企业备份·容灾备份软件
Zenova EdgeOS24 分钟前
Go 工业边缘错误处理实战:用 errors 构建可追溯错误链
开发语言·数据库·golang
KKKlucifer27 分钟前
国内数据安全服务的产品智能化转型:大模型赋能下的技术能力重构分析
大数据·数据库·重构
取名真是36 分钟前
Python 算法知识点从基础到进阶
开发语言·python·算法
梦想不只是梦与想43 分钟前
PyTorch、CPU、GPU、CUDA
人工智能·pytorch·python·深度学习·机器学习·cuda
数字融合1 小时前
透明化视频孪生危化安全管控解决方案
人工智能·python·安全
字节跳动开源1 小时前
OpenViking 上线原生 3D 内容理解模型
数据库·开源
别问!问就是全会2 小时前
Jupyter Notebook 安装包下载|单元格分块运行,图表直接内嵌
ide·python·其他·jupyter
深蓝AI3 小时前
Python 缓存击穿实测:16 个并发请求如何只回源 1 次
python
benchmark_cc3 小时前
用 00700.HK 做港股行情清洗:字段核对、校验与个人量化开发实践
python·数据分析·pandas·量化交易·股票数据·quantdash