Merge branch 'main' of https://github.com/layui/layui into refactor/i18n

2025-08-20 09:28:56 +08:00 · 2025-06-28 15:50:16 +08:00 · 2025-06-28 15:50:16 +08:00 · 6fcdc0bcdf
commit 6fcdc0bcdf
parent a659f0831a 77adc3d196
20 changed files with 366 additions and 135 deletions
--- a/dist/css/layui.css
+++ b/dist/css/layui.css
--- a/dist/css/layui.css.map
+++ b/dist/css/layui.css.map
--- a/dist/layui.js
+++ b/dist/layui.js
--- a/dist/layui.js.map
+++ b/dist/layui.js.map
--- a/docs/panel/index.md
+++ b/docs/panel/index.md
@ -57,8 +57,8 @@ toc: true
 <div class="layui-collapse">
  <div class="layui-colla-item">
    <div class="layui-colla-title">Collapse Title 1</div>
-    <div class="layui-colla-content">
-      <p>Content 1</p>
+    <div class="layui-colla-content layui-show">
+      <p>Content 1 （添加 layui-show 类设置初始展开）</p>
    </div>
  </div>
  <div class="layui-colla-item">
--- a/docs/tabs/detail/demo.md
+++ b/docs/tabs/detail/demo.md
@ -38,6 +38,16 @@
  </textarea>
 </pre>

+<h3 id="demo-shuffle" lay-toc="{level: 2}">打乱标签顺序</h3>
+
+<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'max-height: 520px;', tools: ['full'], done: function(obj){
+  obj.render();
+}}">
+  <textarea>
+{{- d.include("/tabs/examples/shuffle.md") }}
+  </textarea>
+</pre>
+
 <h3 id="demo-hash" lay-toc="{level: 2, title: 'HASH 匹配'}">通过 HASH 匹配选中标签</h3>

 切换 tabs 标签项后，地址栏同步 `hash` 值，当页面刷新时，tabs 仍保持对应的切换状态。
--- a/docs/tabs/examples/shuffle.md
+++ b/docs/tabs/examples/shuffle.md
@ -0,0 +1,22 @@
+<div class="layui-tabs" lay-options="{closable: true}">
+  <ul class="layui-tabs-header">
+    <li lay-id="fff">Tab6</li>
+    <li lay-id="eee">Tab5</li>
+    <li lay-id="ccc">Tab3</li>
+    <li lay-id="bbb">Tab2</li>
+    <li lay-id="aaa">Tab1</li>
+    <li lay-id="ddd">Tab4</li>
+  </ul>
+  <div class="layui-tabs-body">
+    <div class="layui-tabs-item" lay-id="aaa">Tab Content-1</div>
+    <div class="layui-tabs-item" lay-id="bbb">Tab Content-2</div>
+    <div class="layui-tabs-item" lay-id="ccc">Tab Content-3</div>
+    <div class="layui-tabs-item" lay-id="ddd">Tab Content-4</div>
+    <div class="layui-tabs-item" lay-id="eee">Tab Content-5</div>
+    <div class="layui-tabs-item" lay-id="fff">Tab Content-6</div>
+  </div>
+</div>
+
+🔔 提示：即 tabs 能通过 `lay-id` 匹配对应的标签头和标签内容。
+
+<!-- import layui -->
--- a/docs/tabs/index.md
+++ b/docs/tabs/index.md
@ -136,7 +136,7 @@ tabs.add('test', {
 `tabs.close(id, index, force)`

 - 参数 `id` : 组件的实例 ID
- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
+- 参数 `index` : 若传入 number 类型，则为标签索引；若传入 string 类型，则为标签的 `lay-id` 属性值
 - 参数 `force` : 是否强制关闭。若设置 `true` 将忽略 `beforeClose` 事件行为。默认 `false`

 该方法用于关闭指定的标签项。
@ -156,19 +156,23 @@ tabs.close('test', 'abc'); // 关闭 lay-id="abc" 的标签

 | mode | 描述 |
 | --- | --- |
-| other | 关闭除当前标签外的所有标签 |
-| right | 关闭当前标签及右侧标签 |
+| other | 关闭除当前标签外的其他标签 |
+| right | 关闭当前标签的右侧所有标签 |
 | all | 关闭所有标签 |

 - 参数 `index` : 活动标签的索引或 `lay-id` 属性值，默认取当前选中标签的索引。一般用于标签右键事件。

-该方法用于批量关闭标签。
+该方法用于批量关闭标签，若标签项已设置不允许关闭（`lay-closable="false"`），则操作将被忽略。

 ```js
-tabs.closeMult(id, 'other'); // 关闭除当前标签外的所有标签
-tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的所有标签
-tabs.closeMult(id, 'right'); // 关闭当前标签及右侧标签
+tabs.closeMult(id, 'other'); // 关闭除当前活动标签外的其他标签
+tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的其他标签
+tabs.closeMult(id, 'other', 'ccc'); // 关闭除 lay-id="ccc" 的标签外的其他标签
+
+tabs.closeMult(id, 'right'); // 关闭当前活动标签的右侧所有标签
 tabs.closeMult(id, 'right', 3); // 关闭索引为 3 的标签的右侧所有标签
+tabs.closeMult(id, 'right', 'ccc'); // 关闭 lay-id="ccc" 的标签的右侧所有标签
+
 tabs.closeMult(id, 'all'); // 关闭所有标签
 ```

@ -220,7 +224,7 @@ console.log(data);
 `tabs.getHeaderItem(id, index)`

 - 参数 `id` : 组件的实例 ID
- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
+- 参数 `index` : 若传入 number 类型，则为标签索引；若传入 string 类型，则为标签的 `lay-id` 属性值

 该方法用于获取标签头部项元素。

@ -234,7 +238,7 @@ var headerItem = tabs.getHeaderItem('test', 'abc'); // 获取 lay-id="abc" 的
 `tabs.getBodyItem(id, index)`

 - 参数 `id` : 组件的实例 ID
- 参数 `index` : 标签索引或标签的 `lay-id` 属性值 <sup>2.11.2+</sup>
+- 参数 `index` : 若传入 number 类型，则为标签索引；若传入 string 类型，则为标签的 `lay-id` 属性值 <sup>2.11.2+</sup>

 该方法用于获取标签内容项元素。

--- a/docs/treeTable/index.md
+++ b/docs/treeTable/index.md
@ -274,7 +274,8 @@ treeTable.addNodes('test', {
 | index | 节点对应的行下标，一般可通过 `<tr>` 元素的 `data-index` 属性获得 | number | - |
 | expandFlag | 设置展开或关闭状态，若为 `true` 则表示展开；`false` 则为关闭；`null` 则表示切换 | boolean/null | - |
 | inherit | 子节点是否继承父节点的展开或关闭状态，`expandFlag` 属性必须为 `boolean` 型时才有效。 | boolean | `false` |
-| callbackFlag | 是否触发事件（`beforeExpand,onExpand`） | boolean | `false` |
+| callbackFlag | 是否触发 tree.callback 事件（`beforeExpand,onExpand`） | boolean | `false` |
+| done <sup>2.11.3+</sup>| 节点操作完成后的回调函数 | (tableId, trData, trExpand) => void | - |

 若操作的节点不是一个父节点，则返回 `null`，否则返回操作之后的折叠状态。

--- a/docs/versions.md
+++ b/docs/versions.md
@ -11,6 +11,38 @@ toc: true

 <h2 id="2.10+" lay-toc="{title: '2.10+'}"></h2>

+<h2 id="v2.11.4" lay-pid="2.10+" class="ws-anchor">
+  v2.11.4
+  <span class="layui-badge-rim">2025-06-23</span>
+  <span class="layui-badge-rim" style="color: #16b777;">稳定版</span>
+</h2>
+
+- 重构 collapse 展开收缩动画的核心逻辑 #2734
+- 新增 collapse 列表项添加 `layui-show` 类设置默认展开的支持，且兼容旧版 #2734
+- 修复 collapse 列表项的内容元素添加 `layui-show` 类时的收缩异常问题 #2734
+
+### 下载： [layui-v2.11.4.zip](https://gitee.com/layui/layui/attach_files/2241193/download)
+
+---
+
+<h2 id="v2.11.3" lay-pid="2.10+" class="ws-anchor">
+  v2.11.3
+  <span class="layui-badge-rim">2025-06-18</span>
+</h2>
+
+- #### tabs
+  - 优化 `close` 方法在标签顺序打乱时传入 `lay-id` 的支持 #2690 @sentsim
+  - 优化 `closeMult` 方法的 `index` 参数值为 `lay-id` 时的无效问题 #2690 @sentsim
+  - 优化 `getHeaderItem` 等方法的 `index` 参数的类型检测 #2690 @sentsim
+- #### treeTable
+  - 新增 `expandNode` 方法的 `done` 回调 #2721 @Sight-wcg
+- #### collapse
+  - 新增 折叠面板展开和收缩时的过渡动画 #2722 @sentsim
+
+### 下载： [layui-v2.11.3.zip](https://gitee.com/layui/layui/attach_files/2233291/download)
+
+---
+
 <h2 id="v2.11.2" lay-pid="2.10+" class="ws-anchor">
  v2.11.2
  <span class="layui-badge-rim">2025-05-15</span>
--- a/examples/collapse.html
+++ b/examples/collapse.html
@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>折叠面板 - Layui</title>
+    <link rel="stylesheet" href="../src/css/layui.css">
+  </head>
+  <body class="layui-padding-3">
+    <h2>常规用法：</h2><br>
+    <div class="layui-collapse" lay-filter="test">
+      <div class="layui-colla-item">
+        <h3 class="layui-colla-title">item 1</h3>
+        <div class="layui-colla-content layui-show">
+          旧版，通过给列表的内容添加 layui-show 类开启显示
+        </div>
+      </div>
+      <div class="layui-colla-item">
+        <h3 class="layui-colla-title">item2</h3>
+        <div class="layui-colla-content">
+          content 2
+        </div>
+      </div>
+      <div class="layui-colla-item">
+        <h3 class="layui-colla-title">item 3</h3>
+        <div class="layui-colla-content">
+          content 3
+        </div>
+      </div>
+    </div>
+
+    <br>
+
+    <div class="layui-collapse" lay-filter="test">
+      <div class="layui-colla-item layui-show">
+        <h3 class="layui-colla-title">item 111</h3>
+        <div class="layui-colla-content">
+          新版 <sup>2.11.4+</sup>，通过给列表项直接添加 layui-show 类开启显示
+        </div>
+      </div>
+      <div class="layui-colla-item">
+        <h3 class="layui-colla-title">item 222</h3>
+        <div class="layui-colla-content">
+          content 2
+        </div>
+      </div>
+      <div class="layui-colla-item">
+        <h3 class="layui-colla-title">item 333</h3>
+        <div class="layui-colla-content">
+          content 3
+        </div>
+      </div>
+    </div>
+
+
+    <br><h2>开启手风琴：</h2><br>
+    <div class="layui-collapse" lay-accordion>
+      <div class="layui-colla-item layui-show">
+        <h3 class="layui-colla-title">item 1</h3>
+        <div class="layui-colla-content">
+          旧版，通过给列表的内容添加 layui-show 类开启显示
+        </div>
+      </div>
+      <div class="layui-colla-item">
+        <h3 class="layui-colla-title">item2</h3>
+        <div class="layui-colla-content">
+          content 2
+        </div>
+      </div>
+      <div class="layui-colla-item">
+        <h3 class="layui-colla-title">item 3</h3>
+        <div class="layui-colla-content">
+          content 3
+        </div>
+      </div>
+    </div>
+
+    <script src="../src/layui.js"></script>
+    <script>
+    layui.use('element', function(){
+      var element = layui.element;
+
+      element.on('collapse(test)', function(data){
+        console.log(data);
+      });
+    });
+    </script>
+  </body>
+</html>
--- a/examples/element.html
+++ b/examples/element.html
@ -68,30 +68,7 @@ body{padding:20px;}

 <span class="layui-badge-rim">Hot</span>

-<hr>
-
-<div class="layui-collapse" lay-filter="test" lay-accordion>
-  <div class="layui-colla-item">
-    <h2 class="layui-colla-title">杜甫</h2>
-    <div class="layui-colla-content layui-show">
-      <p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
-    </div>
-  </div>
-  <div class="layui-colla-item">
-    <h2 class="layui-colla-title">李清照</h2>
-    <div class="layui-colla-content">
-      <p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
-    </div>
-  </div>
-  <div class="layui-colla-item">
-    <h2 class="layui-colla-title">鲁迅</h2>
-    <div class="layui-colla-content">
-      <p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
-    </div>
-  </div>
-</div>
-
-<br><br>
+<hr><br>

 <div class="layui-progress" lay-showPercent="true" lay-filter="demo-progress-1">
  <div class="layui-progress-bar" lay-percent="1/3"></div>
@ -174,19 +151,11 @@ body{padding:20px;}
 灰色分割线
 <hr class="layui-border-gray">

-
-
-
 <script src="../src/layui.js"></script>
 <script>
-
-layui.use(['element', 'form'], function(){
-  var element = layui.element;
-
-  element.on('collapse(test)', function(data){
-    console.log(data);
+  layui.use('element', function() {
+    var element = layui.element;
  });
-});
 </script>
 </body>
 </html>
--- a/examples/tabs.html
+++ b/examples/tabs.html
@ -90,6 +90,26 @@
      </div>
    </div>

+    <h2>打乱标签顺序：</h2>
+    <div class="layui-tabs" lay-options="{closable: true}">
+      <ul class="layui-tabs-header">
+        <li lay-id="fff">Tab6</li>
+        <li lay-id="eee">Tab5</li>
+        <li lay-id="ccc">Tab3</li>
+        <li lay-id="bbb">Tab2</li>
+        <li lay-id="aaa">Tab1</li>
+        <li lay-id="ddd">Tab4</li>
+      </ul>
+      <div class="layui-tabs-body">
+        <div class="layui-tabs-item" lay-id="aaa">Tab Content-1</div>
+        <div class="layui-tabs-item" lay-id="bbb">Tab Content-2</div>
+        <div class="layui-tabs-item" lay-id="ccc">Tab Content-3</div>
+        <div class="layui-tabs-item" lay-id="ddd">Tab Content-4</div>
+        <div class="layui-tabs-item" lay-id="eee">Tab Content-5</div>
+        <div class="layui-tabs-item" lay-id="fff">Tab Content-6</div>
+      </div>
+    </div>
+
    <h2>标签 HASH 定位</h2>
    <div class="layui-tabs layui-hide-v" id="demoTabs-hash">
      <ul class="layui-tabs-header">
@ -267,6 +287,8 @@
      }],
      click: function(data, othis, event) {
        var index = this.elem.index(); // 获取活动标签索引
+        var layid = this.elem.attr('lay-id');
+
        // 新增标签操作
        if (data.action === 'add') {
          // 在当前活动标签右侧新增标签页
--- a/examples/treeTable-async.html
+++ b/examples/treeTable-async.html
@ -14,12 +14,17 @@
  <div class="layui-fluid" style="padding: 15px;">
    <button class="layui-btn" lay-on="asyncLoad">asyncLoad</button>
    <button class="layui-btn" lay-on="flatData">flatData</button>
+    <button class="layui-btn" lay-on="expandNode">expandNode</button>
+    <button class="layui-btn" lay-on="unexpandNode">unexpandNode</button>
    <table id="demo"></table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
  <script src="../src/layui.js" src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.7/layui.js"
    src1="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/layui.js"></script>
  <script>
+    Mock.setup({
+      timeout: '100-300'
+    });
    layui.use(["treeTable", "util"], function () {
      var treeTable = layui.treeTable;
      var util = layui.util;
@ -39,6 +44,11 @@
              async: {
                enable: true,
                autoParam: ["parentId=id"]
+              },
+              callback: {
+                onExpand: function (tableId, trData, trExpand) {
+                  console.log('onExpand', tableId, trData.id, trExpand);
+                }
              }
            },
          }, true)
@ -57,6 +67,28 @@
              }
            },
          }, true)
+        },
+        expandNode: function(){
+          treeTable.expandNode('demo', {
+            index: 0,
+            expandFlag: true,
+            inherit: true,
+            callbackFlag: true,
+            done: function (tableId, trData, trExpand) {
+              console.log('done', tableId, trData.id, trExpand);
+            }
+          })
+        },
+        unexpandNode: function(){
+          treeTable.expandNode('demo', {
+            index: 0,
+            expandFlag: false,
+            inherit: true,
+            callbackFlag: true,
+            done: function (tableId, trData, trExpand) {
+              console.log('done', tableId, trData.id, trExpand);
+            }
+          })
        }
      })

@ -130,7 +162,7 @@
      //var testDatas = getTreeData(rootNodes);

      Mock.mock(/getDatas/, "get", (config) => {
-        console.log(config);
+        //console.log(config);
        var params = layui.url(config.url);
        var search = params.search;
        var parentId = search.parentId;
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "layui",
-  "version": "2.11.2",
+  "version": "2.11.4",
  "description": "Classic modular Front-End UI library",
  "keywords": [
    "layui",
--- a/src/css/layui.css
+++ b/src/css/layui.css
@ -577,7 +577,9 @@ a cite{font-style: normal;}
 .layui-colla-item:first-child{border-top: none;}
 .layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden;}
 .layui-colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #5F5F5F;}
-.layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}
+.layui-colla-icon{position: absolute; left: 15px; top: 50%; margin-top: -7px; font-size: 14px; line-height: normal; transition: all .2s;}
+.layui-colla-item.layui-show > .layui-colla-title .layui-colla-icon{transform: rotate(90deg);}
+.layui-colla-item.layui-show > .layui-colla-content{display: block;}

 /* 卡片面板 */
 .layui-card{margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
--- a/src/layui.js
+++ b/src/layui.js
@ -28,7 +28,7 @@

  // constructor
  var Class = function() {
-    this.v = '2.11.2'; // 版本号
+    this.v = '2.11.4'; // 版本号
  };

  // 识别预先可能定义的指定全局对象
--- a/src/modules/element.js
+++ b/src/modules/element.js
@ -404,28 +404,51 @@ layui.define('jquery', function(exports) {
    }

    // 折叠面板
-    ,collapse: function(){
+    ,collapse: function() {
      var othis = $(this);
-      var icon = othis.find('.layui-colla-icon');
-      var elemCont = othis.siblings('.layui-colla-content');
-      var parents = othis.parents('.layui-collapse').eq(0);
-      var filter = parents.attr('lay-filter');
-      var isNone = elemCont.css('display') === 'none';
+      var wrapper = othis.closest('.layui-collapse');
+      var filter = wrapper.attr('lay-filter');

-      // 是否手风琴
-      if(typeof parents.attr('lay-accordion') === 'string'){
-        var show = parents.children('.layui-colla-item').children('.'+SHOW);
-        show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;');
-        show.removeClass(SHOW);
+      var ANIM_MS = 200; // 动画过渡毫秒数
+      var CLASS_ITEM = '.layui-colla-item';
+      var CLASS_CONTENT = '.layui-colla-content';
+
+      var thisItemElem = othis.parent(CLASS_ITEM);
+      var thisContentElem = othis.siblings(CLASS_CONTENT);
+      var isNone = thisContentElem.css('display') === 'none';
+      var isAccordion = typeof wrapper.attr('lay-accordion') === 'string';
+
+      // 动画执行完成后的操作
+      var complete = function() {
+        $(this).css('display', ''); // 剔除动画生成的 style display，以适配外部样式的状态重置
+      };
+
+      // 是否正处于动画中的状态
+      if (thisContentElem.is(':animated')) return;
+
+      // 展开或收缩
+      if (isNone) {
+        // 先执行 slideDown 动画，再标注展开状态样式，避免元素 `block` 状态导致动画无效
+        thisContentElem.slideDown(ANIM_MS, complete);
+        thisItemElem.addClass(SHOW);
+      } else {
+        // 先取消展开状态样式，再将元素临时显示，避免 `none` 状态导致 slideUp 动画无效
+        thisItemElem.removeClass(SHOW);
+        thisContentElem.show().slideUp(ANIM_MS, complete);
      }

-      elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
-      icon.html(isNone ? '&#xe61a;' : '&#xe602;');
+      // 是否开启手风琴
+      if (isAccordion) {
+        var itemSiblings = thisItemElem.siblings('.'+ SHOW);
+        itemSiblings.removeClass(SHOW);
+        itemSiblings.children(CLASS_CONTENT).show().slideUp(ANIM_MS, complete);
+      }

+      // 事件
      layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
-        title: othis
-        ,content: elemCont
-        ,show: isNone
+        title: othis,
+        content: thisContentElem,
+        show: isNone
      });
    }
  };
@ -617,27 +640,32 @@ layui.define('jquery', function(exports) {
        });
      }

-      //折叠面板
-      ,collapse: function(elem){
+      // 折叠面板
+      ,collapse: function(elem) {
        var ELEM = 'layui-collapse';
        var targetElem = elem || $('.' + ELEM + elemFilter);

-        targetElem.each(function(){
-          var elemItem = $(this).find('.layui-colla-item')
-          elemItem.each(function(){
+        targetElem.each(function() {
+          var elemItem = $(this).find('.layui-colla-item');
+          elemItem.each(function() {
            var othis = $(this)
-            ,elemTitle = othis.find('.layui-colla-title')
-            ,elemCont = othis.find('.layui-colla-content')
-            ,isNone = elemCont.css('display') === 'none';
+            var elemTitle = othis.find('.layui-colla-title');
+            var elemCont = othis.find('.layui-colla-content');
+            var isNone = elemCont.css('display') === 'none';

-            //初始状态
+            // 初始状态
            elemTitle.find('.layui-colla-icon').remove();
-            elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '&#xe602;' : '&#xe61a;') +'</i>');
+            elemTitle.append('<i class="layui-icon layui-icon-right layui-colla-icon"></i>');
+            othis[isNone ? 'removeClass' : 'addClass'](SHOW);

-            //点击标题
+            // 兼容旧版（ < 2.11.3）
+            if (elemCont.hasClass(SHOW)) {
+              elemCont.removeClass(SHOW);
+            }
+
+            // 点击标题
            elemTitle.off('click', call.collapse).on('click', call.collapse);
          });
-
        });
      }
    };
--- a/src/modules/tabs.js
+++ b/src/modules/tabs.js
@ -228,14 +228,13 @@ layui.define('component', function(exports) {
   * @param {boolean} force - 是否强制删除
   */
  Class.prototype.close = function(thisHeaderItem, force) {
-    if(!thisHeaderItem || !thisHeaderItem[0]) return;
+    if (!thisHeaderItem || !thisHeaderItem[0]) return;

    var that = this;
    var options = that.config;
+    var layid = thisHeaderItem.attr('lay-id');
    var index = thisHeaderItem.index();

-    if (!thisHeaderItem[0]) return;
-
    // 标签是否不可关闭
    if (thisHeaderItem.attr('lay-closable') === 'false') {
      return;
@ -251,7 +250,7 @@ layui.define('component', function(exports) {
        component.CONST.MOD_NAME,
        'beforeClose('+ options.id +')',
        $.extend(data, {
-          index: thisHeaderItem.index()
+          index: index
        })
      );

@ -271,8 +270,8 @@ layui.define('component', function(exports) {
    }

    // 移除元素
+    that.findBodyItem(layid || index).remove();
    thisHeaderItem.remove();
-    that.findBodyItem(index).remove();

    that.roll('auto', index);

@ -304,14 +303,9 @@ layui.define('component', function(exports) {

    index = index === undefined ? data.index : index;

-    // 将标签头 lay-closable 属性值同步到 body 项
-    headers.each(function(i) {
-      var othis = $(this);
-      var closableAttr = othis.attr('lay-closable');
-      if (closableAttr) {
-        bodys.eq(i).attr('lay-closable', closableAttr);
-      }
-    });
+    var headerItem = that.findHeaderItem(index);
+    var bodyItem = that.findBodyItem(index);
+    var itemIndex = headerItem.index();

    // 若当前选中标签也允许关闭，则尝试寻找不可关闭的标签并将其选中
    if (data.thisHeaderItem.attr('lay-closable') !== 'false') {
@ -323,22 +317,33 @@ layui.define('component', function(exports) {
        } else if(prevHeader[0]) {
          that.change(prevHeader, true);
        }
-      } else if(index !== data.index) { // 自动切换到活动标签（功能可取消）
-        that.change(that.findHeaderItem(index), true);
+      } else if(index !== data.index) { // 自动切换到活动标签
+        that.change(headerItem, true);
      }
    }

    // 执行批量关闭标签
-    if (mode === 'other') { // 关闭其他标签
-      headers.eq(index).siblings(FILTER).remove();
-      bodys.eq(index).siblings(FILTER).remove();
-    } else if(mode === 'right') { // 关闭右侧标签
-      headers.filter(':gt('+ index +')'+ FILTER).remove();
-      bodys.filter(':gt('+ index +')'+ FILTER).remove();
-    } else { // 关闭所有标签
-      headers.filter(FILTER).remove();
-      bodys.filter(FILTER).remove();
-    }
+    headers.each(function(i) {
+      var $this = $(this);
+      var layid = $this.attr('lay-id');
+      var bodyItem = that.findBodyItem(layid || i);
+
+      // 标签是否不可关闭
+      if ($this.attr('lay-closable') === 'false') {
+        return;
+      }
+
+      // 批量关闭方式
+      var isCloseOther = mode === 'other' && i !== itemIndex; // 关闭其他标签
+      var isCloseRight = mode === 'right' && i > itemIndex; // 关闭右侧标签
+      var isCloseLeft = mode === 'left' && i < itemIndex; // 关闭左侧标签（不推荐）
+      var isCloseAll = mode === 'all'; // 关闭所有标签
+
+      if (isCloseOther || isCloseRight || isCloseLeft || isCloseAll) {
+        $this.remove();
+        bodyItem.remove();
+      }
+    });

    that.roll('auto');

@ -365,7 +370,8 @@ layui.define('component', function(exports) {

    var that = this;
    var options = that.config;
-    var index = thisHeaderItem.attr('lay-id') || thisHeaderItem.index();
+    var layid = thisHeaderItem.attr('lay-id');
+    var index = thisHeaderItem.index();
    var thatA = thisHeaderItem.find('a');
    // 是否存在跳转链接
    var isLink = typeof thatA.attr('href') === 'string' && thatA.attr('target') === '_blank';
@ -392,7 +398,7 @@ layui.define('component', function(exports) {
            headerItem: data.thisHeaderItem
          },
          to: {
-            index: thisHeaderItem.index(),
+            index: index,
            headerItem: thisHeaderItem
          }
        })
@ -409,7 +415,7 @@ layui.define('component', function(exports) {
    .removeClass(component.CONST.CLASS_THIS);

    // 执行标签内容切换
-    that.findBodyItem(index).addClass(component.CONST.CLASS_SHOW)
+    that.findBodyItem(layid || index).addClass(component.CONST.CLASS_SHOW)
    .siblings().removeClass(component.CONST.CLASS_SHOW);

    that.roll('auto', index);
@ -467,7 +473,11 @@ layui.define('component', function(exports) {
    opts = opts || {};

    // 不可关闭项
-    if (opts.closable == false || headerItem.attr('lay-closable') === 'false') {
+    if (opts.closable == false) {
+      headerItem.attr('lay-closable', 'false');
+    }
+
+    if (headerItem.attr('lay-closable') === 'false') {
      return;
    }

@ -652,30 +662,35 @@ layui.define('component', function(exports) {
  Class.prototype.findHeaderItem = function(index) {
    var container = this.getContainer();
    var headerItems = container.header.items;
-    var headerItem = headerItems.filter('[lay-id="'+ index +'"]');
-    return headerItem[0] ? headerItem : headerItems.eq(index);
+
+    // 根据 lay-id 匹配
+    if (typeof index === 'string') {
+      return headerItems.filter('[lay-id="'+ index +'"]');
+    }
+
+    return headerItems.eq(index);
  };

  /**
   * 获取标签内容项
-   * @param {number} index - 标签索引或 lay-id
+   * @param {number|string} index - 标签索引或 lay-id
   */
  Class.prototype.findBodyItem = function(index) {
    var container = this.getContainer();
    var bodyItems = container.body.items;
-    var bodyItem = bodyItems.filter('[lay-id="'+ index +'"]');

-    return bodyItem[0] ? bodyItem : function() {
-      // 若未匹配到 lay-id 对应内容项，则继续匹配对应头部项
-      var headerItems = container.header.items;
-      var headerItem = headerItems.filter('[lay-id="'+ index +'"]');
+    // 根据 lay-id 匹配
+    if (typeof index === 'string') {
+      var bodyItem = bodyItems.filter('[lay-id="'+ index +'"]');
+      return bodyItem[0] ? bodyItem : function() {
+        // 若未匹配到 lay-id 对应内容项，则通过对应头部项的索引匹配内容项
+        var headerItems = container.header.items;
+        var headerItem = headerItems.filter('[lay-id="'+ index +'"]');
+        return bodyItems.eq(headerItem.index());
+      }();
+    }

-      if (headerItem[0]) {
-        index = headerItem.index();
-      }
-
-      return bodyItems.eq(index);
-    }();
+    return bodyItems.eq(index);
  };

  /**
@ -734,10 +749,10 @@ layui.define('component', function(exports) {
     * @param {('other'|'right'|'all')} [mode="all"] - 关闭方式
     * @param {number} index - 活动标签的索引，默认取当前选中标签的索引。一般用于标签右键事件
     */
-    closeMult: function(id, mode, index, force) {
+    closeMult: function(id, mode, index) {
      var that = component.getInst(id);
      if(!that) return;
-      that.closeMult(mode, index, force);
+      that.closeMult(mode, index);
    },

    /**
--- a/src/modules/treeTable.js
+++ b/src/modules/treeTable.js
@ -590,7 +590,7 @@ layui.define(['table'], function (exports) {
  })()

  // 优化参数，添加一个 getNodeByIndex 方法 只传 表格id 和行 dataIndex 分几步优化 todo
-  var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag) {
+  var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag, done) {
    // treeNode // 需要展开的节点
    var trElem = treeNode.trElem;
    var tableViewElem = treeNode.tableViewElem || trElem.closest(ELEM_VIEW);
@ -658,7 +658,7 @@ layui.define(['table'], function (exports) {
              tableViewElem: tableViewElem,
              tableId: tableId,
              options: options,
-            }, expandFlag, sonSign, focus, callbackFlag);
+            }, expandFlag, sonSign, focus, callbackFlag, done);
          } else if (item1[LAY_EXPAND]) { // 初始化级联展开
            expandNode({
              dataIndex: item1[LAY_DATA_INDEX],
@ -666,7 +666,7 @@ layui.define(['table'], function (exports) {
              tableViewElem: tableViewElem,
              tableId: tableId,
              options: options,
-            }, true);
+            }, true, undefined, undefined, undefined, done);
          }
        });
      } else {
@ -681,7 +681,7 @@ layui.define(['table'], function (exports) {
            trData[LAY_ASYNC_STATUS] = 'success';
            trData[customName.children] = data;
            treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX])
-            expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag);
+            expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag, done);
          }

          var format = asyncSetting.format; // 自定义数据返回方法
@ -804,7 +804,7 @@ layui.define(['table'], function (exports) {
                tableViewElem: tableViewElem,
                tableId: tableId,
                options: options,
-              }, expandFlag, sonSign, focus, callbackFlag);
+              }, expandFlag, sonSign, focus, callbackFlag, done);
            })
          }
        }
@ -820,7 +820,7 @@ layui.define(['table'], function (exports) {
            tableViewElem: tableViewElem,
            tableId: tableId,
            options: options,
-          }, expandFlag, sonSign, focus, callbackFlag);
+          }, expandFlag, sonSign, focus, callbackFlag, done);
        });
        tableViewElem.find(childNodes.map(function (value, index, array) { // 只隐藏直接子节点，其他由递归的处理
          return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
@ -843,6 +843,10 @@ layui.define(['table'], function (exports) {
      layui.type(onExpand) === 'function' && onExpand(tableId, trData, trExpand);
    }

+    if(layui.type(done) === 'function' && trData[LAY_ASYNC_STATUS] !== 'loading'){
+      done(tableId, trData, trExpand);
+    }
+
    return retValue;
  }

@ -853,7 +857,8 @@ layui.define(['table'], function (exports) {
   * @param {Number|String} opts.index 展开行的数据下标
   * @param {Boolean} [opts.expandFlag] 展开、关闭、切换
   * @param {Boolean} [opts.inherit] 是否级联子节点
-   * @param {Boolean} [opts.callbackFlag] 是否触发事件
+   * @param {Boolean} [opts.callbackFlag] 是否触发 tree.callback 事件
+   * @param {Boolean} [opts.done] 节点操作完成后的回调函数
   * @return [{Boolean}] 状态结果
   * */
  treeTable.expandNode = function (id, opts) {
@ -871,7 +876,7 @@ layui.define(['table'], function (exports) {
    var tableViewElem = options.elem.next();
    return expandNode({
      trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()
-    }, expandFlag, sonSign, null, callbackFlag)
+    }, expandFlag, sonSign, null, callbackFlag, opts.done)
  };

  /**