Layui TreeTable 组件滚动条位置保持问题解析

问题背景

在使用 Layui 的 TreeTable 组件时，开发者发现当设置了 scrollPos: 'fixed' 参数后，在重新加载数据时滚动条位置无法保持的问题。特别是在 TreeTable 高度较大时，这个问题尤为明显。

问题现象

1. 当 TreeTable 高度设置为 500px 时，重载数据可以保持滚动条位置
2. 当高度增加到 600px 时，重载数据后滚动条会回到顶部
3. 该问题在编辑 TreeTable 数据后需要重新刷新时，用户体验较差

技术分析

经过深入分析，发现问题的根源在于 TreeTable 的重载机制：

1. TreeTable 重载数据时，会先加载显示顶层节点
2. 然后根据重载前的子节点展开状态，重新展开需要显示的子节点
3. 当顶层节点较少且未展开子节点时，没有滚动条
4. 自动展开子节点后，滚动条会重新出现并定位到顶部

解决方案

方案一：修改 TreeTable 源码

在 TreeTable 的 reload 方法中添加滚动条位置保持逻辑：

treeTable.reload = function (id, options, deep, type) {
  var that = getThisTable(id);
  if (!that) return;
  
  if ((that.config.scrollPos === 'fixed' || options.scrollPos === 'fixed') && type === 'reloadData') {
    let scrollTop = $('div[lay-id="' + id + '"]').find('.layui-table-body.layui-table-main').scrollTop();
    if (typeof options.done === 'function' || typeof that.config.done === 'function') {
      let oriDone = options.done || that.config.done;
      options.done = function(){
        oriDone && oriDone.call(this);
        $('div[lay-id="' + id + '"]').find('.layui-table-body').scrollTop(scrollTop);
      }
    }
  }
  
  that.reload(options, deep, type);
  return thisTreeTable.call(that);
};

方案二：应用层补丁

在不修改源码的情况下，可以在业务代码中实现滚动条位置保持：

treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
  var config = obj.config;
  var tableId = config.id;
  if (obj.event === "reloadData") {
    let scrollTop = $('div[lay-id="' + tableId + '"]').find('.layui-table-body.layui-table-main').scrollTop();
    treeTable.reloadData('ID-treeTable-demo', {
      scrollPos: 'fixed',
      done: function() {
        $('div[lay-id="' + tableId + '"]').find('.layui-table-body').scrollTop(scrollTop);
      }
    });
  }
});

最佳实践建议

1. 对于需要频繁重载数据的 TreeTable，建议采用方案二的补丁方式
2. 如果项目中有多处使用 TreeTable，建议采用方案一的源码修改方式
3. 在设置 TreeTable 高度时，需要根据实际数据量合理设置，避免高度过大导致滚动条问题

总结

Layui 的 TreeTable 组件在数据重载时的滚动条位置保持问题，通过上述两种方案都能有效解决。开发者可以根据项目实际情况选择最适合的解决方案。这个问题也提醒我们，在使用 UI 组件时，需要充分理解其内部机制，才能更好地解决实际开发中遇到的各种问题。