layui表格支援自適應嗎

layui表格支援自適應嗎？

layui表格不支援自適應。例如在頁面中新增資料表格時，會發現資料表格每列寬度的大小不能自適應表格，都擠在了一起，看了官方文件後發現，可以為表格設定列寬：

layuiTable.render({
width: 710,
elem: '#tabSta',
url: "/pickTicket/tytr", 
cols: [[
{ field: "ShiftsID", title: "班次ID", hide: true },
{ field: "scheduleCoding", title: "班次", align: "center" },
{ field: "time", title: "时间", align: "center" },
{ field: "carNumber", title: "车辆编号", align: "center" } 
]],
});

但是，問題由來了。當我縮小頁面時，表格的寬度還是原來的寬度，無法達到自適應大小的要求。原因在於我剛才給它設定的寬度是固定大小的寬度。

既然上面這個方法不行，那就進行第二種解決方法。我在瀏覽器頁面檢查發現，當寬度設為100%時，資料表格的寬度就能進行自適應大小了。所以，在資料表格的對應程式碼中給它加上參數done，給資料表格自訂一個樣式。

相關程式碼如下：

tabrecord =layuiTable.render({
elem: ‘#tabStation’,
url: “/pickTicket/tytr”,
done: function (res, curr, count){
KaTeX parse error: Expected 'EOF', got '}' at position 34: …th", "100%"); }̲, cols: [[ { fi…(“table”).css(“width”, “100%”);

也可以這樣寫$(“table”).width(“100%”)。

透過這樣設置，我們回到瀏覽器頁面進行查看，無論我們怎樣縮放頁面，資料表格都能自行適應頁面大小。

更多Layui相關技術文章，請造訪Layui框架教學欄位進行學習！

以上是layui表格支援自適應嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！