前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >layui table reload表格刷新重加载后lay-tips提示框不显示问题

layui table reload表格刷新重加载后lay-tips提示框不显示问题

作者头像
acoolgiser
发布2022-09-16 13:36:05
1.4K0
发布2022-09-16 13:36:05
举报
文章被收录于专栏:acoolgiser_zhuanlanacoolgiser_zhuanlan

一、功能

        首先,功能效果如下图所示,当鼠标移动到表头的时候,显示一个悬浮的提示框tips。

 二、出现的bug

        在别的地方调用table.reload()方法刷新表格数据后,提示框不显示,但是在F12中查看该DOM元素的属性,lay-tips属性还在,大概加估计,猜测是失去了绑定的mouseenter监听事件,导致不触发了。

三、出现bug的原实现方式

        原来是在table所在的页面初始化时,通过table.render()创建表格,同时设置给表格中表头的lay-tips添加绑定mouseenter事件,鼠标移动进入时可弹窗提示框。这样每次刷新表格所在页面(注意和刷新表格的不同)时,就会在加载表格执行table.render()方法的同时,执行一次给表头添加mouseenter事件的方法,但是当在别的地方改变了表格里的数据,通过table.reload()方法刷新表格时,没有再给表头绑定mouseenter事件,导致不弹出提示框。

四、解决办法

        首先想到的解决办法是在表格刷新时,再调用一次绑定mouseenter事件的方法,但是这样可能会造成重复绑定,尤其是页面使用了tab控件包括多个table的时候,容易重复添加tips弹框,造成闪烁现象。

        最后发现只需要在表格渲染table.render()之后的done()方法里进行绑定mouseenter事件就可以了。

五、总结

        使用layui 的table时,如果有对表格所做的一些设置,比如编辑控制、字段显示、样式等,都应该在done()方法里实现。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-07-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档