自己挖過的坑需要自己來填。

layui的table默認表頭工具欄右邊有3個操作，分別是過濾字段、導出excel、打印功能。

在js中代碼添加toolbar即可實現上面的效果：

table.render({

elem:‘#demo‘,height:420,url:‘/demo/table/user/‘ //數據接口

,title: ‘用戶表‘,page:true //開啟分頁

,toolbar: ‘default‘ //開啟工具欄，此處顯示默認圖標，可以自定義模板，詳見文檔

,totalRow: true //開啟合計行

,cols: [[ //這里省略 ]]

});

如果在分頁的情況下，這里默認導出的是當前頁篩選后的結果。我們其實需要從后臺返回數據提供給這個組件。

經過一番查找后，終于發現修改的思路，這里需要更新到官方2.5.5版本的layui。

然后在官方的文檔里面看到如下的內容：

注意這部分內容在文檔的中間部分，但是右邊的目錄上是沒有的，之前把右邊的目錄點了遍也沒發現。

整段的內容全部放在一個頁面上，右邊的錨點也不全，這種文檔讀起來真費事。

下面說下怎么改：

原來在table里面渲染的 toolbar: ‘default‘可以自己修改為自定義的圖標和事件。

由于我既定義了自己的頭部工具條在左邊，又修改了默認的右邊的工具條，所以就成了下面這樣。

,defaultToolbar: [‘filter‘,‘p

總結

以上是生活随笔為你收集整理的layui 给table里面的添加图标_layui中的table中toolbar自定义过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。