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

最新推荐文章于 2023-08-30 18:41:34 发布

原创最新推荐文章于 2023-08-30 18:41:34 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文为acoolgiser原创文章，转载请贴上原文链接。（公众号：acoolgiser）

文章标签：

#layui #javascript #前端 #layui table #table lay-tips

layui 专栏收录该内容

2 篇文章

订阅专栏

本文讨论了在layui框架中使用表格时遇到的问题，即在调用table.reload()刷新数据后，表头悬停提示框不再显示。原因是表头的mouseenter事件未在刷新时重新绑定。解决方法是在table.render()后的done()方法内绑定事件，以确保每次刷新数据时事件都能正确生效。此外，还提醒在使用layui的table时，涉及的自定义设置应在done()中实现，以保持稳定性。

一、功能

首先，功能效果如下图所示，当鼠标移动到表头的时候，显示一个悬浮的提示框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()方法里实现。