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

问题背景

Layui 的 TreeTable 组件在数据重载时存在一个影响用户体验的问题：当设置了 scrollPos: 'fixed' 参数后，在某些情况下无法保持滚动条位置。这个问题在用户编辑表格内容后需要重新加载数据时尤为明显，会导致用户需要重新定位到之前查看的位置。

问题现象

当 TreeTable 满足以下条件时会出现滚动条位置无法保持的问题：

1. 表格高度设置较大（如600px）
2. 表格初始状态有展开的子节点
3. 用户滚动到表格中间位置
4. 调用 reloadData 方法重新加载数据

此时滚动条会回到顶部，而不是保持在原来的位置。而当表格高度设置较小（如500px）时，这个问题则不会出现。

技术原因分析

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

1. TreeTable 在重载数据时，会先加载显示顶层节点
2. 然后根据重载数据前保存的子节点展开状态，重新展开需要展开的子节点
3. 当顶层节点较少时，在只显示顶层节点的短暂时间内，表格内容不足以产生滚动条
4. 当自动展开子节点后，滚动条重新出现，但位置已经重置到顶部

解决方案

方案一：修改 TreeTable 源码

在 treeTable.js 文件中，可以修改 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);
};

方案二：应用层临时解决方案

如果无法修改源码，可以在调用 reloadData 方法时手动处理滚动条位置：

treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
  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. 在等待官方修复期间，可以将此问题封装为一个公共方法，方便多处调用
3. 对于新项目，可以考虑在初始化 TreeTable 时就添加滚动条位置保持的逻辑

总结

TreeTable 的滚动条位置保持问题虽然看似小问题，但对于用户体验影响较大。理解其背后的技术原理有助于开发者更好地应对类似问题。本文提供的两种解决方案各有优劣，开发者可以根据项目实际情况选择最适合的方案。