🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 渲染表格相关参数说明 ### 渲染表格需要的格式: ``` <script> layui.use(['form', 'table'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table.render({ }); }); </script> ``` * 参数说明:elem ~~~ <table class="layui-hide" id="currentTableId" ></table> // 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 //实例说明 elem: '#currentTableId', 对应table容器的id值** ~~~ * 参数说明:toolbar ~~~ <script type="text/html" id="toolbarDemo"> <button class="layui-btn data-add-btn" lay-event="add"> <i class="layui-icon layui-icon-add-1"></i>添加学员 </button> </script> // 此处使用script标签是方便在html中不显示出来,也可以使用div加样式display : none toolbar: '#toolbarDemo', // table头部左侧的按钮 // 当toolbar的值为true时,左侧按钮为空只显示右侧按钮 ~~~ * 参数说明:title ~~~ title : '学员登记表', // 数据导出时的文件名 ~~~ * 参数说明:defaultToolbar ~~~ defaultToolbar: ['filter', 'exports', 'print', { // table头部右侧的按钮 title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], ~~~ * 参数说明:cols ~~~ cols: [[ // 数据 {type: "checkbox", width: 50}, {field: 'id', width: 80, title: 'ID', sort: true}, {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} ]], // 接口数据对应的数据个数 ~~~ * 参数说明: limits ~~~ limits: [10, 15, 20, 25, 50, 100], // 自定义分页选择框中的每页显示多少数据 ~~~ * 参数说明:limit ~~~ limit: 15, // 每页显示多少条数据 ~~~ * 参数说明:page ~~~ page: true, // 开启数据分页 ~~~ * 参数说明:skin ~~~ skin: 'line' // 开启表格数据隔行背景 ~~~ * 参数说明:id ~~~ <table class="layui-hide" id="userList"></table> // 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引 ~~~ * cols中的参数:templet ~~~ cols: [[ //表头 {field:'create_time', title:'领取时间', templet:function(data){ return layui.util.toDateString(data.create_time*1000, "yyyy-MM-dd HH:mm:ss"); } }, {fixed: 'sex', title: '性别',templet:function (d) { return d.sex == '男' ? '汉子':'妹子'; // 此处的 d 代表此行的数据 }} ]], ~~~ * cols中的toolbar ~~~ <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit"> <i class="layui-icon">&#xe642;</i>编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> <i class="layui-icon">&#xe640;</i>删除</a> </script> {fixed: 'right',title: '操作', width: 220, align:'center', toolbar: '#barDemo'} // 标示表格中单行数据的操作,区别于table.render({ });中的toolbar参数 ~~~