天天看點

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時,視窗收縮,導緻表格中按鈕點選事件失效的一種解決方案

繼續閱讀