使用layui修改table样式

水深无声 2022-06-03 04:25 614阅读 0赞

**table的结构：**

<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);
5.  
6.  //得到当前页码
7.  console.log(curr);
8.  
9.  //得到数据总量
10. console.log(count);
11. \}

\}  
\}