Layui快速入门之第八节表格渲染与属性的使用

清疚 2024-03-03 08:29 35阅读 0赞

**目录**

一：表格的渲染

API

方法配置渲染

模板配置渲染

静态表格渲染

二：表格的属性

基础属性

异步属性

返回数据中的特定字段

表头属性

重载

完整重载

仅数据重载 2.7+

获取选中行

设置行选中状态 2.8+

获取当前页接口数据

获取表格缓存数据集

重置尺寸

导出数据

获取配置项 2.8+

设置列显示或隐藏 2.8+

--------------------

### 一：表格的渲染 ###

#### API ####

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>var table = layui.table</td> 
   <td>获得&nbsp;<code>table</code>&nbsp;模块。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#render" title="table.render(options)" rel="nofollow">table.render(options)</a></td> 
   <td>table 组件渲染，核心方法。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.init" title="table.init(filter, options)" rel="nofollow">table.init(filter, options)</a></td> 
   <td>初始化渲染静态表格。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.reload" title="table.reload(id, options, deep)" rel="nofollow">table.reload(id, options, deep)</a></td> 
   <td>表格完整重载。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.reloadData" title="table.reloadData(id, options, deep)" rel="nofollow">table.reloadData(id, options, deep)</a>&nbsp;2.7+</td> 
   <td>表格数据重载。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.checkStatus" title="table.checkStatus(id)" rel="nofollow">table.checkStatus(id)</a></td> 
   <td>获取选中行相关数据。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.setRowChecked" title="table.setRowChecked(id, opts)" rel="nofollow">table.setRowChecked(id, opts)</a>&nbsp;2.8+</td> 
   <td>设置行选中状态。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.getData" title="table.getData(id)" rel="nofollow">table.getData(id)</a></td> 
   <td>获取当前页所有行表格数据。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.cache" title="table.cache" rel="nofollow">table.cache</a></td> 
   <td>获取表格缓存数据集（包含特定字段）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.resize" title="table.resize(id)" rel="nofollow">table.resize(id)</a></td> 
   <td>重置表格尺寸。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.exportFile" title="table.exportFile(id, data, opts)" rel="nofollow">table.exportFile(id, data, opts)</a></td> 
   <td>导出表格数据到本地文件。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.getOptions" title="table.getOptions(id)" rel="nofollow">table.getOptions(id)</a>&nbsp;2.8+</td> 
   <td>获取表格实例配置项。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.hideCol" title="table.hideCol(id, cols)" rel="nofollow">table.hideCol(id, cols)</a>&nbsp;2.8+</td> 
   <td>设置表格列的显示隐藏属性。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.on" title="table.on('event(filter)', callback)" rel="nofollow">table.on('event(filter)', callback)</a></td> 
   <td>table 相关事件。</td> 
  </tr> 
 </tbody> 
</table>

渲染

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

<table> 
 <thead> 
  <tr> 
   <th>渲染方式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.render" title="方法配置渲染" rel="nofollow">方法配置渲染</a></td> 
   <td>通过 table 组件提供的核心方法&nbsp;<code>table.render(options)</code>&nbsp;完成的渲染。推荐</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#view-render" title="模板配置渲染" rel="nofollow">模板配置渲染</a></td> 
   <td>通过&nbsp;<code>&lt;table&gt;</code>&nbsp;标签的&nbsp;<code>lay-options="{}"</code>&nbsp;属性定义模板，组件自动对其进行解析并完成渲染。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.init" title="静态表格渲染" rel="nofollow">静态表格渲染</a></td> 
   <td>对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。</td> 
  </tr> 
 </tbody> 
</table>

##### 方法配置渲染 #####

`table.render(options);`

*  参数 `options` : 基础属性配置项。[\#详见属性][Link 1]

该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

<table id="test"></table>
     
    <script>
    layui.use(function(){
      var table = layui.table;
      
      // 渲染，并获得实例对象
      var inst = table.render({
        elem: '#test', // 绑定元素选择器
        // 其他属性
        // …
      });
     
      // 实例对象成员
      inst.config; // 当前表格配置属性
      inst.reload(options, deep); // 对当前表格的完整重载。参数 deep 表示是否深度重载。
      inst.reloadData(options, deep); // 对当前表格的数据重载。参数 deep 同上。
      inst.resize(); // 对当前表格重新适配尺寸
      inst.setColsWidth() // 对当前表格重新分配列宽
    })
    </script>

##### 模板配置渲染 #####

在 `<table>` 元素中直接书写 `lay-options="{}"` 属性，组件将自动对其进行解析并完成渲染。

<table class="layui-table" lay-options="{url: ''}" id="test">
      <thead>
        <tr>
          
          <th lay-options="{field: 'title'}">Title</th> 
        </tr>
      </thead>
    </table>

2.8 之前版本通过 `lay-data="{}"` 定义属性配置项；  
2.8+ 版本推荐采用 `lay-options`，但同时兼容 `lay-data`。

##### 静态表格渲染 #####

`table.init(filter, options);`

*  参数 `filter` : `<table>` 元素对应的 `lay-filter` 属性值
 *  参数 `options` : 基础属性配置项。[\#详见属性][Link 1]

该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件

<table lay-filter="test">
      表格内容
    </table>
     
    <script>
    layui.use(function(){
      var table = layui.table;
      // 将静态表格进行动态化
      table.init('test', {
        height: 366,
        // 其他属性
        // …
      });
    });
    </script>

### 二：表格的属性 ###

属性是指 table *渲染、重载* 时的配置选项（`options`），它本身是一个 `object` 参数。如：

// 渲染
    table.render({
      // options
      elem: '',
      cols: [[]],
      // …
    }); 
    // 重载
    table.reload(id, {
      // options
    });
           
    若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（：
    <table lay-options="{url: ''}"> … </table>

table 的属性众多，我们大致分为以下几种：

<table> 
 <thead> 
  <tr> 
   <th>属性类别</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#options" title="基础属性" rel="nofollow">基础属性</a></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#options.ajax" title="异步属性" rel="nofollow">异步属性</a></td> 
   <td>用于和异步数据请求相关的基础属性，由于相关属性成员较多，所以单独提取介绍。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#options.cols" title="表头属性" rel="nofollow">表头属性</a></td> 
   <td>基础属性&nbsp;<code>cols</code>&nbsp;的子属性集。</td> 
  </tr> 
 </tbody> 
</table>

#### 基础属性 ####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>elem</td> 
   <td>绑定原始 table 元素，方法渲染方式必填。</td> 
   <td>string/DOM</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#options.ajax" title="url" rel="nofollow">url</a></p> </td> 
   <td> <p>发送异步请求的 URL。更多异步相关属性见 :&nbsp;<a href="https://layui.org.cn/docs/table/table.html#options.ajax" title="#异步属性" rel="nofollow">#异步属性</a></p> </td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#options.cols" title="cols" rel="nofollow">cols</a></p> </td> 
   <td> <p>表头属性集，通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 :&nbsp;<a href="https://layui.org.cn/docs/table/table.html#options.cols" title="#表头属性" rel="nofollow">#表头属性</a></p> </td> 
   <td>array</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td> <p>直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与&nbsp;<code>url</code>&nbsp;属性只能二选一。</p> </td> 
   <td>array</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td> <p>设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从&nbsp;<code>elem</code>&nbsp;属性绑定的原始 table 元素中的&nbsp;<code>id</code>&nbsp;属性值中获取。</p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>toolbar</td> 
   <td> <p>开启表格头部工具栏。支持以下几种值写法：</p> 
    <ul> 
     <li><code>toolbar: '#template-id'</code>&nbsp;自定义工具栏模板选择器</li> 
     <li><code>toolbar: '&lt;div&gt;xxx&lt;/div&gt;</code>&nbsp;直接传入模板字符</li> 
     <li><code>toolbar: true</code>&nbsp;仅开启工具栏右侧，不显示左侧模板</li> 
     <li><code>toolbar: 'default'</code>&nbsp;开启工具栏并显示默认模板</li> 
    </ul></td> 
   <td>string<br> boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>defaultToolbar</td> 
   <td> <p>设置头部工具栏右侧图标。值是一个数组，可选成员有:&nbsp;<code>filter,exports,print</code>&nbsp;（分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：<code>defaultToolbar: ['filter','print','exports']</code><br> 支持自定义图标及事件，用法详见示例:&nbsp;<a href="https://layui.org.cn/docs/table/table.html#examples" title="#综合演示" rel="nofollow">#综合演示</a></p> </td> 
   <td>array</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>设置容器宽度，默认自适应。</td> 
   <td>number</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#options.height" title="height" rel="nofollow">height</a></p> </td> 
   <td> <p>设置表格容器高度，默认自适应。其他可选值的规则如下：</p> 
    <ul> 
     <li><code>height: 315</code>&nbsp;设置固定高度</li> 
     <li><code>height: 'full-30'</code>&nbsp;设置自适应高度。这是一个特定的语法格式：<code>full</code>&nbsp;表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部<em>加</em>表格底部距离页面最底部的“距离和”</li> 
     <li><code>height: '#id-30'</code>&nbsp;设置相对父元素的高度自适应，其中&nbsp;<code>#id</code>&nbsp;即父元素的 ID 选择器，其计算原理和上述&nbsp;<code>full</code>&nbsp;相同。</li> 
    </ul></td> 
   <td>number<br> string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>maxHeight&nbsp;2.8+</td> 
   <td> <p>设置表格容器的最大高度，设置该属性后，<code>height</code>&nbsp;属性将被认定为默认的自适应值。</p> </td> 
   <td>number</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>cellMinWidth</td> 
   <td> <p>设置所有普通单元格的最小宽度，一般用于列宽自动分配的情况。其优先级低于表头属性中的&nbsp;<code>minWidth</code></p> </td> 
   <td>number</td> 
   <td> <p><code>60</code></p> </td> 
  </tr> 
  <tr> 
   <td>cellMaxWidth&nbsp;2.8+</td> 
   <td> <p>设置所有普通单元格的最大宽度。其优先级低于表头属性中的&nbsp;<code>maxWidth</code></p> </td> 
   <td>number</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>lineStyle&nbsp;2.7+</td> 
   <td> <p>用于定义表格的多行样式，如每行的高度等。该参数一旦设置，单元格将会开启多行模式，且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。 请按实际场景使用。<br> 示例：<code>lineStyle: 'height: 95px;'</code></p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>className&nbsp;2.7+</td> 
   <td>用于给表格主容器追加 css 类名，以便更好地扩展表格样式</td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>css&nbsp;2.7+</td> 
   <td> <p>用于给当前表格主容器直接设定 css 样式，样式值只会对所在容器有效，不会影响其他表格实例。如：<code>css: '.layui-table-page{text-align: right;}'</code></p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>escape&nbsp;2.6+</td> 
   <td>是否开启对内容的编码（转义 html）</td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>totalRow</td> 
   <td>是否开启合计行区域</td> 
   <td>string</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>page</td> 
   <td> <p>用于开启分页。<br> 支持传入&nbsp;<a href="https://layui.org.cn/docs/laypage/laypage.html#options" title="laypage" rel="nofollow">laypage</a>&nbsp;组件的基础属性（jump,elem 除外）</p> </td> 
   <td>boolean<br> object</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>pagebar&nbsp;2.7+</td> 
   <td> <p>用于开启分页区域的自定义模板，用法同&nbsp;<code>toolbar</code>&nbsp;属性。</p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>limit</td> 
   <td> <p>每页显示的条数。值需对应 limits 参数的选项。优先级低于&nbsp;<code>page</code>&nbsp;属性中的&nbsp;<code>limit</code>&nbsp;属性。</p> </td> 
   <td>number</td> 
   <td> <p><code>10</code></p> </td> 
  </tr> 
  <tr> 
   <td>limits</td> 
   <td>每页条数的选择项。</td> 
   <td>array</td> 
   <td> <p><code>[10,…,90]</code></p> </td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td> <p>是否显示加载条。若为&nbsp;<code>false</code>，则在切换分页时，不会出现加载条。必须设置了&nbsp;<code>url</code>&nbsp;属性才生效。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>scrollPos&nbsp;2.7+</td> 
   <td> <p>用于设置重载数据或切换分页时的滚动条位置状态。可选值：</p> 
    <ul> 
     <li><code>fixed</code>&nbsp;重载数据时，保持滚动条位置不变</li> 
     <li><code>reset</code>&nbsp;重载数据时，滚动条位置恢复置顶</li> 
     <li><code>default</code>&nbsp;默认方式，无需设置。即重载数据或切换分页时，纵向滚动条置顶，横向滚动条位置不变。</li> 
    </ul></td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>editTrigger&nbsp;2.7+</td> 
   <td> <p>是用于设定单元格编辑的事件触发方式。如双击:&nbsp;<code>dblclick</code></p> </td> 
   <td>string</td> 
   <td> <p><code>click</code></p> </td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>定义 table 的大标题（在文件导出等地方会用到）</td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>自定义文本，如空数据时的异常提示等。</td> 
   <td>object</td> 
   <td>查看默认值</td> 
  </tr> 
  <tr> 
   <td>autoSort</td> 
   <td> <p>是否由组件自动进行前端排序。若为&nbsp;<code>false</code>，则需自主排序，即由后端直接返回排序好的数据。<a href="https://layui.org.cn/docs/table/table.html#on-sort" title="#详细用法" rel="nofollow">#详细用法</a></p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>initSort</td> 
   <td> <p>初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个&nbsp;<code>object</code>&nbsp;类型的值，包含属性有：</p> 
    <ul> 
     <li><code>field</code>&nbsp;排序字段。对应&nbsp;<code>cols</code>&nbsp;设定的各字段名</li> 
     <li><code>type</code>&nbsp;排序方式。可选值 :&nbsp;<code>'asc','desc',null</code>，即：<code>升序、降序、默认</code></li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>initSort: { </code></li> 
     <li><code>field: 'id', // 按 id 字段排序</code></li> 
     <li><code>type: 'desc' // 降序排序</code></li> 
     <li><code>}</code></li> 
    </ol></td> 
   <td>object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>skin</td> 
   <td> <p>设置表格边框风格。可选值：<code>grid</code>|<code>line</code>|<code>row</code>|<code>nob</code></p> </td> 
   <td>string</td> 
   <td> <p><code>grid</code></p> </td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td> <p>设置表格其他尺寸。可选值：<code>sm</code>|<code>md</code>|<code>lg</code></p> </td> 
   <td>string</td> 
   <td> <p><code>md</code></p> </td> 
  </tr> 
  <tr> 
   <td>even</td> 
   <td> <p>是否开启隔行背景。</p> </td> 
   <td>string</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>before&nbsp;2.7+</td> 
   <td>数据渲染之前的回调函数。</td> 
   <td>function</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#options.done" title="done" rel="nofollow">done</a></p> </td> 
   <td> <p>数据渲染完毕的回调函数。返回的参数如下：</p> <pre></pre> 
    <ol> 
     <li><code>table.render({ </code></li> 
     <li><code>done: function(res, curr, count){ </code></li> 
     <li><code>console.log(res); // 得到当前渲染的数据</code></li> 
     <li><code>console.log(curr); // 得到当前页码</code></li> 
     <li><code>console.log(count); // 得到数据总量</code></li> 
     <li><code>}</code></li> 
     <li><code>// … // 其它属性</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
   <td>function</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>error&nbsp;2.6+</td> 
   <td>数据请求失败的回调函数。返回两个参数：错误对象、内容。</td> 
   <td>function</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

#### 异步属性 ####

异步属性本质也是基础属性，当开启 `url` 属性时才有效，由于相关属性成员较多，所以单独提取介绍。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td> <p>发送异步请求的 URL。默认会自动传递两个参数：<code>?page=1&amp;limit=30</code>（该参数可通过&nbsp;<code>request</code>&nbsp;属性自定义）<br><code>page</code>&nbsp;代表当前页码、<code>limit</code>&nbsp;代表每页数据条数。</p> </td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td> <p>请求的方式，默认：<code>get</code></p> </td> 
  </tr> 
  <tr> 
   <td>where</td> 
   <td> <p>请求的其他参数。如：<code>where: {token: 'sasasas', id: 123}</code></p> </td> 
  </tr> 
  <tr> 
   <td>headers</td> 
   <td> <p>请求的数据头参数。如：<code>headers: {token: 'sasasas'}</code></p> </td> 
  </tr> 
  <tr> 
   <td>contentType</td> 
   <td> <p>请求的内容编码类型。若要发送&nbsp;<code>json</code>&nbsp;内容，可设置：<br><code>contentType: 'application/json'</code></p> </td> 
  </tr> 
  <tr> 
   <td>dataType&nbsp;2.7+</td> 
   <td> <p>请求的数据类型，默认&nbsp;<code>json</code>。</p> </td> 
  </tr> 
  <tr> 
   <td>jsonpCallback&nbsp;2.7+</td> 
   <td> <p>设置当&nbsp;<code>dataType: 'jsonp'</code>&nbsp;时的回调函数名。</p> </td> 
  </tr> 
  <tr> 
   <td>request</td> 
   <td> <p>用于对默认的分页相关的请求参数&nbsp;<code>page,limit</code>&nbsp;重新设定名称。如：</p> <pre></pre> 
    <ol> 
     <li><code>request: { </code></li> 
     <li><code>pageName: 'curr', // 页码的参数名称，默认：page</code></li> 
     <li><code>limitName: 'nums' // 每页数据条数的参数名，默认：limit</code></li> 
     <li><code>}</code></li> 
    </ol><p>那么请求数据时的参数将会变为&nbsp;<code>?curr=1&amp;nums=30</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#options.parseData" title="parseData" rel="nofollow">parseData</a></p> </td> 
   <td> <p>数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式：</p> <pre></pre> 
    <ol> 
     <li><code>{ </code></li> 
     <li><code>"code": 0,</code></li> 
     <li><code>"msg": "",</code></li> 
     <li><code>"count": 1000,</code></li> 
     <li><code>"data": [{}, {}]</code></li> 
     <li><code>}</code></li> 
    </ol><p>很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：</p> <pre></pre> 
    <ol> 
     <li><code>{ </code></li> 
     <li><code>"status": 0,</code></li> 
     <li><code>"message": "", </code></li> 
     <li><code>"total": 180, </code></li> 
     <li><code>"data": { </code></li> 
     <li><code>"item": [{}, {}]</code></li> 
     <li><code>}</code></li> 
     <li><code>}</code></li> 
    </ol><p>此时我们可以借助&nbsp;<code>parseData</code>&nbsp;回调函数将数据解析并转换为默认规定的格式：</p> <pre></pre> 
    <ol> 
     <li><code>table.render({ </code></li> 
     <li><code>elem: '',</code></li> 
     <li><code>url: '',</code></li> 
     <li><code>parseData: function(res){ // res 即为原始返回的数据</code></li> 
     <li><code>return { </code></li> 
     <li><code>"code": res.status, // 解析接口状态</code></li> 
     <li><code>"msg": res.message, // 解析提示文本</code></li> 
     <li><code>"count": res.total, // 解析数据长度</code></li> 
     <li><code>"data": res.data.item // 解析数据列表</code></li> 
     <li><code>};</code></li> 
     <li><code>},</code></li> 
     <li><code>// … //其他参数</code></li> 
     <li><code>});</code></li> 
    </ol><p>该函数非常实用</p> </td> 
  </tr> 
 </tbody> 
</table>

##### 返回数据中的特定字段 #####

在返回的数据中，允许规定某些特定字段，以便 table 组件进行相应的特定解析。

<table> 
 <thead> 
  <tr> 
   <th>特定字段名</th> 
   <th>描述</th> 
   <th>读写状态</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>LAY_CHECKED</td> 
   <td>当前行的选中状态</td> 
   <td>可读可写</td> 
  </tr> 
  <tr> 
   <td>LAY_DISABLED</td> 
   <td>当前行是否禁止选择</td> 
   <td>可读可写</td> 
  </tr> 
  <tr> 
   <td>LAY_INDEX</td> 
   <td>当前行下标。每页重新从零开始计算</td> 
   <td>只读</td> 
  </tr> 
  <tr> 
   <td>LAY_NUM</td> 
   <td>当前行序号</td> 
   <td>只读</td> 
  </tr> 
  <tr> 
   <td>LAY_COL</td> 
   <td>当前列的表头属性配置项</td> 
   <td>只读</td> 
  </tr> 
 </tbody> 
</table>

示例一: 在返回的数据中设置特定字段：

> 1.  `{`
> 2.  `"code": 0,`
> 3.  `"count": 1000,`
> 4.  `"data": [{},{`
> 5.  `LAY_DISABLED: true`
> 6.  `}]`
> 7.  `}`

示例二: 在模板中读取特定字段示例：

> 1.  `<script type="text/html" id="TPL-demo-xxx">`
> 2.  `当前行下标: { {= d.LAY_INDEX }}`
> 3.  `当前列的某个表头属性: { {= d.LAY_COL.field }}`
> 4.  `</script>`

##### 表头属性 #####

表头属性是基础属性 `cols` 的子集，其使用频率甚至超过基础属性本身。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>field</td> 
   <td> <p>设置字段名。通常是表格数据列的唯一标识</p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td> <p>设置列的标题。</p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>fieldTitle&nbsp;2.8+</td> 
   <td> <p>设置列的字段标题。该属性在筛选列和导出场景中优先级高于&nbsp;<code>title</code>&nbsp;属性</p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td> <p>设置列宽。若不填写，则自动分配；若填写，则支持值为：<em>数字、百分比</em>。如：&nbsp;<code>width: 200</code>&nbsp;/&nbsp;<code>width: '30%'</code></p> </td> 
   <td>number/string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>minWidth</td> 
   <td> <p>设置当前列的最小宽度，一般用于列宽自动分配的情况。其优先级高于基础属性中的&nbsp;<code>cellMinWidth</code></p> </td> 
   <td>number</td> 
   <td> <p><code>60</code></p> </td> 
  </tr> 
  <tr> 
   <td>maxWidth&nbsp;2.8+</td> 
   <td> <p>设置当前列的最大宽度。其优先级高于基础属性中的&nbsp;<code>cellMaxWidth</code></p> </td> 
   <td>number</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td> <p>设置列类型。可选值有：</p> 
    <ul> 
     <li><code>normal</code>&nbsp;常规列，无需设定</li> 
     <li><code>checkbox</code>&nbsp;复选框列</li> 
     <li><code>radio</code>&nbsp;单选框列</li> 
     <li><code>numbers</code>&nbsp;序号列</li> 
     <li><code>space</code>&nbsp;空列</li> 
    </ul></td> 
   <td>string</td> 
   <td> <p><code>normal</code></p> </td> 
  </tr> 
  <tr> 
   <td>LAY_CHECKED</td> 
   <td> <p>设置全选状态，当列设置&nbsp;<code>type: 'checkbox'</code>&nbsp;时才有效。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td> <p>设置固定列，即不跟随 table 横向滚动条而滚动。可选值有：</p> 
    <ul> 
     <li><code>left</code>&nbsp;固定在左</li> 
     <li><code>right</code>&nbsp;固定在右</li> 
    </ul></td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#cols.templet" title="templet" rel="nofollow">templet</a></p> </td> 
   <td colspan="3"> <p>设置列的自定义模板，核心属性。模板遵循&nbsp;<a href="https://layui.org.cn/docs/laytpl/laytpl.html" title="laytpl" rel="nofollow">laytpl</a>&nbsp;组件语法。</p> <p><code>templet</code>&nbsp;提供了三种使用方式，选择任一用法即可：</p> 
    <ul> 
     <li><strong>设置模版选择器</strong></li> 
    </ul><p></p> <pre></pre> 
    <ol> 
     <li><code>&lt;script type="text/html" id="TPL-demo-title"&gt;</code></li> 
     <li><code>&lt;a href="/detail/{ {= d.id }}" class="layui-table-link"&gt;</code></li> 
     <li><code>{ {= d.title }} </code></li> 
     <li><code>&lt;/a&gt;</code></li> 
     <li><code>&lt;/script&gt;</code></li> 
     <li></li> 
     <li><code>&lt;!-- </code></li> 
     <li><code>模板中的 `d` 不仅包含当前行数据，还包含特定字段，如：</code></li> 
     <li><code>{ {= d.LAY_INDEX }} { {= d.LAY_COL }} 等 </code></li> 
     <li><code>--&gt;</code></li> 
    </ol><pre></pre> 
    <ol> 
     <li><code>table.render({ </code></li> 
     <li><code>cols: [[</code></li> 
     <li><code>{field: 'title', templet: '#TPL-demo-title'}</code></li> 
     <li><code>// …</code></li> 
     <li><code>]],</code></li> 
     <li><code>// …</code></li> 
     <li><code>});</code></li> 
    </ol><p></p> 
    <ul> 
     <li><strong>设置模板内容</strong></li> 
    </ul><p>该方式必须在内容中包裹一层&nbsp;<code>&lt;div&gt;&lt;/div&gt;</code>，否则无法读取模板。</p> <p></p> <pre></pre> 
    <ol> 
     <li><code>table.render({ </code></li> 
     <li><code>cols: [[</code></li> 
     <li><code>{field: 'title', templet: '&lt;div&gt;&lt;a href="/detail/{ {= d.id }}" class="layui-table-link"&gt;{ {= d.title }}&lt;/a&gt;&lt;/div&gt;'}</code></li> 
     <li><code>// …</code></li> 
     <li><code>]],</code></li> 
     <li><code>// …</code></li> 
     <li><code>});</code></li> 
    </ol><p></p> 
    <ul> 
     <li><strong>设置模板函数</strong></li> 
    </ul><p>函数将返回一个&nbsp;<code>d</code>&nbsp;参数，包含当前行数据及特定的额外字段。</p> <pre></pre> 
    <ol> 
     <li><code>table.render({ </code></li> 
     <li><code>cols: [[</code></li> 
     <li><code>{field: 'title', templet: function(d){ </code></li> 
     <li><code>console.log(d); // 得到当前行数据</code></li> 
     <li><code>console.log(this); // 得到表头当前列配置项</code></li> 
     <li><code>console.log(d.LAY_NUM); // 得到序号。或其他特定字段</code></li> 
     <li></li> 
     <li><code>// 返回模板内容</code></li> 
     <li><code>return '&lt;a href="/detail/'+ d.id +'" class="layui-table-link"&gt;'+ d.title +'&lt;/a&gt;'</code></li> 
     <li><code>}}</code></li> 
     <li><code>// …</code></li> 
     <li><code>]],</code></li> 
     <li><code>// …</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>exportTemplet&nbsp;2.6.9+</td> 
   <td> <p>设置表格导出时的模板，用法同&nbsp;<code>templet</code>&nbsp;属性。当&nbsp;<code>templet</code>&nbsp;指向的模板内容较复杂时建议使用，如下以模板存在&nbsp;<code>select</code>&nbsp;元素为例：</p> <pre></pre> 
    <ol> 
     <li><code>exportTemplet: function(d, obj){ </code></li> 
     <li><code>// 当前 td</code></li> 
     <li><code>var td = obj.td(this.field);</code></li> 
     <li><code>// 返回 select 选中值</code></li> 
     <li><code>return td.find('select').val();</code></li> 
     <li><code>}</code></li> 
    </ol></td> 
   <td>string<br> function</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#cols.totalRow" title="totalRow" rel="nofollow">totalRow</a></p> </td> 
   <td> <p>是否开启该列的自动合计功能。</p> 
    <ul> 
     <li>前端合计</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>totalRow: true // 开启合计行，并默认对当前所有行数据进行前端合计</code></li> 
    </ol> 
    <ul> 
     <li>后端合计</li> 
    </ul><p>前端合计的数据有限，因此常常需要后端直接返回合计行结果，此时将优先读取后端的合计行返回结果，其格式如下：</p> <pre></pre> 
    <ol> 
     <li><code>{ </code></li> 
     <li><code>"code": 0,</code></li> 
     <li><code>"totalRow": { </code></li> 
     <li><code>"score": "777",</code></li> 
     <li><code>"experience": "999"</code></li> 
     <li><code>},</code></li> 
     <li><code>"data": [{}, {}],</code></li> 
     <li><code>"msg": "",</code></li> 
     <li><code>"count": 1000</code></li> 
     <li><code>}</code></li> 
    </ol><p>如上，在&nbsp;<code>totalRow</code>&nbsp;中返回所需统计的列字段名和值即可。<br><code>totalRow</code>&nbsp;字段同样可以通过&nbsp;<code>parseData</code>&nbsp;回调来解析成为 table 组件所规定的数据格式。</p> 
    <ul> 
     <li>合计行模板</li> 
    </ul><p></p> <pre></pre> 
    <ol> 
     <li><code>totalRow: '{ {= d.TOTAL_NUMS }} 单位' // 还比如只取整：'{ {= parseInt(d.TOTAL_NUMS) }}'</code></li> 
    </ol><p></p> </td> 
   <td>boolean<br> string</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/table/table.html#cols.edit" title="edit" rel="nofollow">edit</a></p> </td> 
   <td> <p>用于对列所在的单元格开启编辑功能。可选值有：</p> 
    <ul> 
     <li><code>edit: 'text'</code>&nbsp;单行输入模式</li> 
     <li><code>edit: 'textarea'</code>&nbsp;多行输入模式&nbsp;2.7+</li> 
    </ul><p><strong>函数写法</strong>&nbsp;2.7+</p> <pre></pre> 
    <ol> 
     <li><code>edit: function(d){ </code></li> 
     <li><code>// d 即为当前行数据，此时可根据行相关字段来开启该行是否编辑的权限</code></li> 
     <li><code>if(d.editable){ // editable 为任意字段名</code></li> 
     <li><code>return 'text'; // 编辑模式</code></li> 
     <li><code>}</code></li> 
     <li><code>}</code></li> 
    </ol></td> 
   <td>string<br> function</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td> <p>是否初始隐藏列</p> </td> 
   <td>boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>escape</td> 
   <td> <p>是否对当前列进行内容编码（转义 html），优先级大于基础属性中的&nbsp;<code>escape</code>。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>sort</td> 
   <td> <p>是否开启列的排序功能。<br> 注意：<em>不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序排序计算中</em>，如：<code>'张三' &gt; '2' &gt; '100'</code>，这可能并不是你想要的结果，但字典序排列采用的是&nbsp;<code>ASCII</code>&nbsp;码比对。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>unresize</td> 
   <td> <p>是否禁用拖拽列宽。默认情况下会根据列类型&nbsp;<code>type</code>&nbsp;属性来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>event</td> 
   <td> <p>自定义单元格点击事件名，以便在&nbsp;<a href="https://layui.org.cn/docs/table/table.html#on-tool" title="单元格工具事件" rel="nofollow">单元格工具事件</a>&nbsp;中完成对该单元格的事件处理。</p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td> <p>自定义单元格样式。可传入任意的 CSS 内容，如：<code>style: 'font-size: 13px; color: red;'</code></p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td> <p>单元格排列方式。可选值有：<code>left</code>&nbsp;|&nbsp;<code>center</code>&nbsp;|&nbsp;<code>right</code></p> </td> 
   <td>string</td> 
   <td> <p><code>left</code></p> </td> 
  </tr> 
  <tr> 
   <td>colspan</td> 
   <td> <p>单元格所占列数。一般用于多级表头</p> </td> 
   <td>number</td> 
   <td> <p><code>1</code></p> </td> 
  </tr> 
  <tr> 
   <td>rowspan</td> 
   <td> <p>单元格所占行数。一般用于多级表头</p> </td> 
   <td>number</td> 
   <td> <p><code>1</code></p> </td> 
  </tr> 
 </tbody> 
</table>

#### 重载 ####

即对一段已经渲染好的表格重新设置属性并渲染，可分为以下几种重载方式：

<table> 
 <thead> 
  <tr> 
   <th>重载方式</th> 
   <th>API</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.reload" title="完整重载" rel="nofollow">完整重载</a></td> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.reload" title="table.reload(id, options, deep)" rel="nofollow">table.reload(id, options, deep)</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.reloadData" title="仅数据重载" rel="nofollow">仅数据重载</a></td> 
   <td><a href="https://layui.org.cn/docs/table/table.html#table.reloadData" title="table.reloadData(id, options, deep)" rel="nofollow">table.reloadData(id, options, deep)</a></td> 
  </tr> 
 </tbody> 
</table>

重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。

##### 完整重载 #####

`table.reload(id, options, deep);`

*  参数 `id` : table 渲染时的 `id` 属性值
 *  参数 `options` : 为基础属性配置项
 *  参数 `deep` 2.6+ : 是否采用深度重载（即重载时始终携带初始时及上一次重载时的参数），默认 false。
    
    2.6 之前版本的 `table.reload()` 方法兼容性说明

该方法用于对表格的视图和数据在内的全部重载，所有属性均会参与到重载中，对应的表格会有一个直观的刷新效果。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 完整重载 - 所有属性属性(options)均可参与到重载中`
> 8.  `table.reload('test', {`
> 9.  `where: { // 传递数据异步请求时携带的字段`
> 10. `aaa: '111',`
> 11. `bbb: '222'`
> 12. `//…`
> 13. `},`
> 14. `height: 1000 // 重设高度`
> 15. `});`

##### 仅数据重载 2.7+ #####

`table.reloadData(id, options, deep);`

*  参数同 `table.reload(id, options, deep)` 参数

该方法用于对表格的数据重载，与数据无关的属性不会参与到重载中。因此若只是更新数据，该方法可大幅提升体验。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 数据重载 - 仅与数据相关的属性(options)能参与到重载中`
> 8.  `table.reloadData('test', {`
> 9.  `where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性`
> 10. `scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效`
> 11. `// …`
> 12. `height: 2000 // 高度 --- 属性设置无效，因不属于数据相关属性`
> 13. `});`

#### 获取选中行 ####

`table.checkStatus(id);`

*  参数 `id` : table 渲染时的 `id` 属性值

该方法用于获取表格当前选中行相关数据

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 获取选中行相关数据`
> 8.  `var tableStatus = table.checkStatus('test');`
> 9.  `console.log(checkStatus.data) // 选中行的数据`
> 10. `console.log(checkStatus.data.length) // 选中行数量，可作为是否有选中行的条件`
> 11. `console.log(checkStatus.isAll ) // 表格是否全选`

#### 设置行选中状态 2.8+ ####

`table.setRowChecked(id, opts);`

*  参数 `id` : table 渲染时的 `id` 属性值
 *  参数 `opts` : 设置行选中时的可选属性，详见下表

<table> 
 <thead> 
  <tr> 
   <th>opts</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>选中方式。可选值:&nbsp;<code>checkbox,radio</code></td> 
   <td>string</td> 
   <td><code>checkbox</code></td> 
  </tr> 
  <tr> 
   <td>index</td> 
   <td>选中行的下标。即数据的所在数组下标（<code>0</code>&nbsp;开头）。<br> 可设置&nbsp;<code>all</code>&nbsp;表示全选。</td> 
   <td>number<br> string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>选中状态值。 若为&nbsp;<code>false</code>&nbsp;可取消选中。</td> 
   <td>boolean</td> 
   <td><code>true</code></td> 
  </tr> 
  <tr> 
   <td>selectedStyle</td> 
   <td>是否仅设置样式状态。若为&nbsp;<code>true</code>&nbsp;则只标注选中样式，不对数据中的&nbsp;<code>LAY_CHECKED</code>&nbsp;属性赋值。</td> 
   <td>boolean</td> 
   <td><code>false</code></td> 
  </tr> 
 </tbody> 
</table>

该方法用于设置行的选中样式及相关的特定属性值 `LAY_CHECKED`。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  
> 8.  `// 设置某行选中`
> 9.  `table.setRowChecked('test', {`
> 10. `index: 0, // 选中行的下标。 0 表示第一行`
> 11. `});`
> 12. `// 取消选中行`
> 13. `table.setRowChecked('test', {`
> 14. `index: 'all', // 所有行`
> 15. `checked: false`
> 16. `});`

#### 获取当前页接口数据 ####

`table.getData(id);`

*  参数 `id` : table 渲染时的 `id` 属性值

该方法用于获取表格当前页的数据，它对应的是接口返回的原始数据，不包含 table 组件内部的特定字段。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 获取当前页接口数据`
> 8.  `var data = table.getData('test');`
> 9.  `console.log(data);`

#### 获取表格缓存数据集 ####

`var tableCache = table.cache;`

`table.cache` 是一段存储当前页表格所有实例的当前页的临时数据，通过 id 作为索引，它包含接口返回的原始数据和组件内部的特定字段。 使用该静态属性可对表格数据进行*读写*操作。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 获取对应 table 的临时数据`
> 8.  `var thisCache = table.cache['test'] || {};`
> 9.  
> 10. `// 变更对应 table 的临时数据中的某个字段值`
> 11. `thisCache.fieldName = 123;`

#### 重置尺寸 ####

`table.resize(id);`

*  参数 `id` : table 渲染时的 `id` 属性值

该方法用于重置表格尺寸和结构，其内部完成了*固定列高度平铺、动态分配列宽、容器滚动条宽高补丁* 等适配。它一般用于修复特殊情况下导致的列宽适配异常（如浏览器窗口尺寸改变导致的表格父容器宽度变化），以保证表格尺寸依旧能友好展示。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 重置对应 table 的尺寸，一般写在表格外部容器宽高发生变化后的段落`
> 8.  `table.resize('test');`

#### 导出数据 ####

`table.exportFile(id, data, opts);`

*  参数 `id` : table 渲染时的 `id` **或** 要导出的数据表头（当 `id` 为 `array` 类型时）。
 *  参数 `data` : 要导出的自定义数据，参数可选。
 *  参数 `opts` 2.7+: 导出数据时的属性可选项，支持： `type,title`。

该方法用于外部导出对应 table 的数据和任意自定义数据。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 外部导出对应 table 的数据`
> 8.  `table.exportFile('test');`
> 9.  
> 10. `// 导出自定义数据`
> 11. `table.exportFile(['名字','性别','年龄'], [`
> 12. `['张三','男','20'],`
> 13. `['李四','女','18'],`
> 14. `['王五','女','19']`
> 15. `], {`
> 16. `type: 'csv', // 导出的文件格式，支持: csv,xls`
> 17. `title: '导出的文件标题'`
> 18. `});`

#### 获取配置项 2.8+ ####

`table.getOptions(id);`

*  参数 `id` : table 渲染时的 `id` 属性值

该方法用于外部获取对应 table 实例的属性配置项。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 获取配置项`
> 8.  `var thisOptions = table.getOptions('test');`
> 9.  `console.log(thisOptions);`

#### 设置列显示或隐藏 2.8+ ####

`table.hideCol(id, cols);`

*  参数 `id` : table 渲染时的 `id` 属性值
 *  参数 `cols` : 设置列（表头）显示或隐藏状态

该方法用于外部设置对应 table 列的显示与隐藏状态。

> 1.  `// 渲染`
> 2.  `table.render({`
> 3.  `elem: '', // 绑定元素选择器`
> 4.  `id: 'test', // 自定义 id 索引`
> 5.  `// 其他属性 …`
> 6.  `});`
> 7.  `// 设置对应列的显示或隐藏`
> 8.  `table.hideCol('test', {`
> 9.  `field: 'title', // 对应表头的 field 属性值`
> 10. ``hide: true // `true` or `false` ``
> 11. `});`

[Link 1]: https://layui.org.cn/docs/table/table.html#options