使用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" onclick='editUser(${user.id})' >编辑</a> 

      <a class="layui-btn layui-btn-danger layui-btn-xs" class="del" onclick='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:{  

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

//得到当前页码
console.log(curr);

//得到数据总量
console.log(count);
}

}
}