layui表格支不支持自適應(yīng)

這篇文章主要介紹了layui表格支不支持自適應(yīng)，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

layui表格不支持自適應(yīng)。比如在頁面中添加數(shù)據(jù)表格時，會發(fā)現(xiàn)數(shù)據(jù)表格每列寬度的大小不能自適應(yīng)表格，都擠在了一起，看了官方文檔后發(fā)現(xiàn)，可以為表格設(shè)置列寬：

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" } ]],});

但是，問題由來了。當(dāng)我縮小頁面時，表格的寬度還是原來的寬度，不能達(dá)到自適應(yīng)大小的要求。原因在于我剛才給它設(shè)置的寬度是固定大小的寬度。

既然上面這個方法不行，那進(jìn)行第二種解決方法。我在瀏覽器頁面檢查發(fā)現(xiàn)，當(dāng)將寬度設(shè)置為100%時，數(shù)據(jù)表格的寬度就能進(jìn)行自適應(yīng)大小了。所以，在數(shù)據(jù)表格的對應(yīng)代碼中給它加上參數(shù)done，給數(shù)據(jù)表格自定義一個樣式。

相關(guān)代碼如下：

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%”)。

通過這樣設(shè)置，我們回到瀏覽器頁面進(jìn)行查看，無論我們怎樣縮放頁面，數(shù)據(jù)表格都能自行適應(yīng)頁面大小。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui表格支不支持自適應(yīng)”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!