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

一、功能

        首先,功能效果如下图所示,当鼠标移动到表头的时候,显示一个悬浮的提示框tips。layui table reload表格刷新重加载后lay-tips提示框不显示问题_第1张图片

 二、出现的bug

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

layui table reload表格刷新重加载后lay-tips提示框不显示问题_第2张图片

三、出现bug的原实现方式

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

四、解决办法

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

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

五、总结

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

你可能感兴趣的:(layui,layui,javascript,前端,layui,table,table,lay-tips)