选项卡组件

📣 升级提示：我们在 2.10 版本中新增了全新的 tabs 标签页组件，用于替代原 element 模块中的 tab 组件，建议过渡到全新的 tabs 组件，旧的 tab 组件将在后续合适的版本中移除。 前往全新 tabs 组件

选项卡组件 tab 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中， tab 组件属于 element 模块的子集。

lay-allowclose 是否开启删除图标。设置在 tab 容器 <ul class="layui-tab"> 上。
^2.9.11+ : 若需要单独关闭某一个选项卡的删除图标，可在选项卡标题元素 <li> 上设置 lay-allowclose="false" lay-id tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 <li> 元素上。在外部附加选项卡拖拽排序时， layui-tab-item 元素也要设置 ID

参数 filter : 对应 tab 容器 lay-filter 的属性值或 ^2.9.15+ 指定元素的 jQuery 对象。

tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染，因此该方法主要用于对动态插入的 tab 元素的初始化渲染。

<div id="test"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var element = layui.element;
  var $ = layui.$;
  // 动态插入 tab 元素
  $('#test').html(`
    <div class="layui-tab" lay-filter="demo-filter-tab">
      <!-- … -->
  // 渲染 tab 组件
  element.render('tab', 'demo-filter-tab');
</script>
添加 tab
element.tabAdd(filter, options);
参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
参数 options : 添加 tab 时的属性选项，见下表：
options
element.tabDelete(filter, layid, force);
参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
参数 layid : 选项卡标题元素的 lay-id 属性值
参数 force 2.9.21+
: 是否强制删除 tab。若设置 true 将忽略 tabBeforeDelete 事件行为。默认 false
该方法用于删除 tab 选项。用法详见 : #示例
切换 tab
element.tabChange(filter, layid, force);
参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
参数 layid : 选项卡标题元素的 lay-id 属性值
参数 force 2.9.15+
: 是否强制执行 tab 切换。设置 true 将忽略 tabBeforeChange 事件行为。默认 false
该方法用于切换到对应的 tab 选项。用法详见 : #示例
自定义 tab
element.tab(options);
参数 options : 属性选项，见下表：
options
// tab 切换事件
element.on('tab(filter)', function(data){
  console.log(this); // 当前 tab 标题所在的原始 DOM 元素
  console.log(data.index); // 得到当前 tab 项的所在下标
  console.log(data.elem); // 得到当前的 tab 容器
  console.log(data.id); // 得到当前的 tab ID(2.9.11+)
tab 切换前的事件 2.9.15+
element.on('tabBeforeChange(filter)', callback);
参数 tabBeforeChange(filter) 是一个特定结构。
tabBeforeChange 为 tab 切换前事件固定值；
filter 为 tab 容器属性 lay-filter 对应的值。
参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。
点击 tab 选项切换前触发。
var element = layui.element;
// tab 切换前的事件
element.on('tabBeforeChange(filter)', function(data){
  console.log(data.elem); // 得到当前的 tab 容器
  console.log(data.from.index); // 得到切换前的 tab 项所在下标
  console.log(data.from.id); // 得到切换前的 tab 项所在ID
  console.log(data.to.index); // 得到切换后的 tab 项所在下标
  console.log(data.to.id); // 得到切换后的 tab 项所在ID
  if(data.to.id === 'home') return false; // 返回 false 时阻止切换到对应的选项卡
tab 删除事件
element.on('tabDelete(filter)', callback);
参数 tabDelete(filter) 是一个特定结构。
tabDelete 为 tab 删除事件固定值；
filter 为 tab 容器属性 lay-filter 对应的值。
参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。
点击 tab 选项删除时触发。
var element = layui.element;
// tab 删除事件
element.on('tabDelete(filter)', function(data){
  console.log(data.index); // 得到被删除的 tab 项的所在下标
  console.log(data.elem); // 得到当前的 tab 容器
  console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+)
tab 删除前的事件 2.9.11+
element.on('tabBeforeDelete(filter)', callback);
参数 tabBeforeDelete(filter) 是一个特定结构。
tabBeforeDelete 为 tab 删除前事件固定值；
filter 为 tab 容器属性 lay-filter 对应的值。
参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。
点击 tab 选项删除前触发。 示例：