天天看点

layui表格中使用toolbar时,窗口收缩,导致表格中按钮点击事件失效的一种解决方案

最近在使用layui时,发现了toolbar使用时的一个bug,当窗口没有收缩时,按钮可以正常使用:

layui表格中使用toolbar时,窗口收缩,导致表格中按钮点击事件失效的一种解决方案

当窗口收缩之后,按钮会有部分不显示,可以通过下拉弹出所有按钮,但是layui自带的    layui.table.on('tool(table)', function(obj){......})方法无法监听到点击事件

layui表格中使用toolbar时,窗口收缩,导致表格中按钮点击事件失效的一种解决方案

目前想到了一种解决方案,就是当单元格的长度不够用时,元素自动向下配列,F12查看html中表格结构:

layui表格中使用toolbar时,窗口收缩,导致表格中按钮点击事件失效的一种解决方案

在html中的加入这一段代码后,当单元格长度不足时,表格中按钮会自动排列到下一行:

</style>
    .layui-table-col-special .layui-table-cell {
		height:auto;
		overflow:visible;
		text-overflow:inherit;
		white-space: normal;
	}
</style>
           

 效果如下:

layui表格中使用toolbar时,窗口收缩,导致表格中按钮点击事件失效的一种解决方案

继续阅读