大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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:{
- done: function(res, curr, count){
- //如果是异步请求数据方式，res即为你接口返回的信息。
- //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
- console.log(res);
- //得到当前页码
- console.log(curr);
- //得到数据总量
- console.log(count);
- }
}
}
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/192849.html原文链接：https://javaforall.net
![vue修饰符简略总结[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
