使用layui修改table样式

table的结构：

<table lay-filter="userlist-table" style="display: none;"> 

  <thead>
    <tr>
      <th lay-data="{field:'a', width:200}">序号</th>
      <th lay-data="{field:'b', width:150}">登录账号</th>
      <th lay-data="{field:'c', minWidth: 180}">用户名</th>
      <th lay-data="{field:'d', minWidth: 180}">权限</th>
      <th lay-data="{field:'e', minWidth: 180}">操作</th>
    </tr> 
  </thead>
  <tbody>
    <#if baseUserPageModel?? && baseUserPageModel.data??>
<#list baseUserPageModel.data as user>
<tr>
      <td>${(user.id)!''}</td>
      <td>${(user.userAccount!'')}</td>
      <td>${(user.userName!'')}</td>
      <td>${(user.roleName!'')}</td>
      <td> 
      <a class="layui-btn layui-btn-xs" class="edit" οnclick='editUser(${user.id})' >编辑</a> 
      <a class="layui-btn layui-btn-danger layui-btn-xs" class="del" οnclick='deleteUser(${user.id})' >删除</a>
      </td>
    </tr>
</#list>
</#if>
  </tbody>

</table>

使用layui渲染table

layui.use(['common','table','jquery'], function(){
  var common = layui.common;
  var table = layui.table;
  var $=layui.$;
   
   var data={
   table :{
id:'userlist-table',
options:{  
}
},
page :{ 
id:"page",
fromId:"searchFrom",
options:{ 
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
first: '首页',
last: '尾页'
}
}
   };
   common.filltable(data);
});

common是自己封装的form table page一体的js插件。

如果想修改某个表格的单元格高度或者修改一些样式，可以在回调函数done里设置。

 table :{
id:'userlist-table',
options:{  

1. done: function(res, curr, count){
2. //如果是异步请求数据方式，res即为你接口返回的信息。
3. //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
4. console.log(res);
6. //得到当前页码
7. console.log(curr);
9. //得到数据总量
10. console.log(count);
11. }

}
}