layui中渲染table表格

页面布局

可直接根据文档要求去写 table 组件（这个不重要）

<table lay-filter="SyDictTable" id="SyDictTable" lay-data="{id: 'SyDictTable'}"></table>

Js

重要的是去修改JS里面的东西，比如：code码、分页这些文档里是没有的

<script>layui.use(['table'，'jquery'], function () {var testTable=layui.table;var $ = layui.jquery// 初始化渲染表格testTable.render({elem: '#SyDictTable',id:'SyDictTable',url: ctx + 'list', // 测试接口// 修改分页参数（因为layui中页数参数跟后端接口参数不一至）request: {pageName: 'pageNum',limitName: 'pageSize'},//  反正就是需要配合layui中的规则（正常的code返回200就可以拿数据，但是layui中                                    code为0才是成功）parseData:function(res){return{"code": res.code == "200" ? 0 : res.code,"count": res.data.total,"data": res.data.rows}},// 表头数据（必须是一个二维数组，具体可看文档描述）cols:[[{field:"dictName",title:"字典名称",unresize:true},{field:"dictCode",title:"字典编码",unresize:true},]],//  分页设置（具体看文档描述）page:{limits: [5, 10, 100, 200], limit: 10 //每页默认显示的数量}，//  请求接口所需要的参数where: parameterFun()});//  参数（比如在渲染表格时会根据一些参数去渲染不同的数据）// 比如会根据 select 选择的内容去渲染数据function parameterFun(){var selectVal = $('#select').val()var params={//  selectText 是接口需要传递的字段名称"selectText" : selectVal }return params})}
</script>

有帮助的点个赞赞 ！！！