docs/table/detail/options.md
发送异步请求的 URL。更多异步相关属性见 : #异步属性
</td> <td>-</td> <td>-</td> </tr> <tr> <td> </td> <td>表头属性集，通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 : #表头属性
</td> <td>array</td> <td>-</td> </tr> <tr> <td>data</td> <td>直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 url 属性只能二选一。
注：当设置 data 模式时，count 的值取 data.length，即对一段已知数据进行分页展示。 此时在 page 属性中设置 count 无效。 若要在同一页显示所有数据，可将 limit 设置成 data.length，即与 count 等同即可，那么默认的分页栏只会显示 1 页，若要自定义分页结构，可通过 pagebar 属性结合 laypage 组件来重新自定义分页排版。
设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从 elem 属性绑定的原始 table 元素中的 id 属性值中获取。
开启表格头部工具栏。支持以下几种值写法：
toolbar: '#template-id' 自定义工具栏模板选择器toolbar: '<div>xxx</div>' 直接传入模板字符toolbar: true 仅开启工具栏右侧，不显示左侧模板toolbar: 'default' 开启工具栏并显示默认模板false
默认内置工具：
defaultToolbar: [
'filter', // 列筛选
'exports', // 导出
'print' // 打印
]
重写内置工具 <sup>2.9.12+</sup>，以自定义导出为例：
<div id="options-defaultToolbar-rewrite"> <style>#options-defaultToolbar-rewrite .layui-code-wrap{max-height: 280px;}</style>defaultToolbar: [
'filter',
{
name: 'exports',
onClick: function(obj) {
// 获得数据并清除临时字段
var data = table.clearCacheKey(obj.data);
// 当前示例配置项
var options = obj.config;
// 弹出面板
obj.openPanel({
list: [ // 列表
'<li data-type="csv">导出 CSV 文件</li>',
'<li data-type="xlsx">导出 XLSX 文件</li>'
].join(''),
done: function(panel, list) { // 操作列表
list.on('click', function() {
var type = $(this).data('type')
if (type === 'csv') {
// 调用内置导出方法
table.exportFile(options.id, null, type);
} else if(type === 'xlsx') {
// 自助处理导出 - 如借助 sheetjs 库或服务端导出
// …
}
});
}
});
}
},
'print'
]
扩展工具图标：
defaultToolbar: [
'filter', 'exports', 'print', // 内置工具
{
// 扩展工具
title: '提示', // 标题
name: 'tips', // name
layEvent: 'LAYTABLE_TIPS', // 事件标识
icon: 'layui-icon-tips', // 图标 className
onClick: function(obj) { // 点击事件 - 2.9.12+
console.log(obj); // 查看返回的对象成员
}
}
]
height: 315 设置固定高度height: 'full-30' 设置相对可视屏幕的高度铺满。这是一个特定的语法格式：full 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部加表格底部距离页面最底部的“距离和”height: '#id-30' 设置相对父元素的高度铺满，其中 #id 即父元素的 ID 选择器，其计算原理和上述 full 相同。函数写法 <sup>2.9.1+</sup>
当需要动态改变表格高度时建议使用，如下以等效 full-xx 的写法为例：
height: function(){
// 自定义其他区域的高度
var otherHeight = $('#search-content').outerHeight();
return $(window).height() - otherHeight; // 返回 number 类型
}
设置表格容器的最大高度，设置该属性后，height 属性将被认定为默认的自适应值。
设置所有普通单元格的最小宽度，一般用于列宽自动分配的情况。其优先级低于表头属性中的 minWidth
60
设置所有普通单元格的最大宽度。其优先级低于表头属性中的 maxWidth
用于定义表格的多行样式，如每行的高度等。该参数一旦设置，单元格将会开启多行模式，且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。 请按实际场景使用。
示例：lineStyle: 'height: 95px;'
是否强制计算表格主区域的行高度并同步到固定列区域。开启后会对表格性能有一定的影响，仅适用于行高度自适应的场景。
该功能使用 ResizeObserver 实现，如果你的浏览器不支持 ResizeObserver，可以尝试添加 polyfill 来解决兼容性问题。
用于给当前表格主容器直接设定 css 样式，样式值只会对所在容器有效，不会影响其他表格实例。如：css: '.layui-table-page{text-align: right;}'
用于设置所有单元格默认展开方式，可选值有：
tips 悬浮展开方式default 多行展开方式（默认）用于设置所有单元格默认展开后的宽度。当 cellExpandedMode 属性为默认值时有效。
60
true
false
用于开启分页。
支持传入 laypage 组件的基础属性（jump,elem 除外）
</td> <td>boolean object</td> <td>false
用于开启分页区域的自定义模板，用法同 toolbar 属性。
每页显示的条数。值需对应 limits 参数的选项。优先级低于 page 属性中的 limit 属性。
10
[10,…,90]
设置数据请求时的加载动画，需开启 url 选项才生效。
boolean 类型，表示是否显示加载条，如：loading: true // 显示默认加载条
loading: false // 禁用加载条
string 类型 <sup>2.9.10+</sup>，表示自定义加载模板，此时可添加任意动画元素，如：loading: '<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>'
true
用于设置重载数据或切换分页时的滚动条位置状态。可选值：
fixed 重载数据时，保持滚动条位置不变reset 重载数据时，滚动条位置恢复置顶default 默认方式，无需设置。即重载数据或切换分页时，纵向滚动条置顶，横向滚动条位置不变。是用于设定单元格编辑的事件触发方式。如双击: dblclick
click
是否由组件自动进行前端排序。若为 false，则需自主排序，即由后端直接返回排序好的数据。#详细用法
true
初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 object 类型的值，包含属性有：
field 排序字段。对应 cols 设定的各字段名type 排序方式。可选值 : 'asc','desc',null，即：升序、降序、默认initSort: {
field: 'id', // 按 id 字段排序
type: 'desc' // 降序排序
}
设置表格边框风格。可选值：grid|line|row|nob
grid
设置表格其他尺寸。可选值：sm|md|lg
md
是否开启隔行背景。
</td> <td>string</td> <td>false
before <sup>2.7+</sup>
</td> <td colspan="3"> <div class="ws-anchor" id="options.before"> 数据渲染之前的回调函数。 </div>table.render({
before: function(options){
console.log(options); // 当前实例属性选项
options.where.abc = 123; // 修改或额外追加 where 属性
},
// … // 其它属性
});
table.render({
done: function(res, curr, count, origin){
console.log(res); // 得到当前渲染的数据
console.log(curr); // 得到当前页码
console.log(count); // 得到数据总量
console.log(origin); // 回调函数所执行的来源 --- 2.8.7+
},
// … // 其它属性
});
数据请求失败的回调函数。返回两个参数：错误对象、内容。
error: function(e, msg) {
console.log(e, msg)
}
数据接口请求完成后执行，无论成功还是失败均会触发
complete: function(xhr, ts) {
console.log(xhr, ts)
}