fix: 重复 render 时停止 onserveResize

fix/fixed-table-rowHeight-sync
sight 2025-09-09 20:24:32 +08:00
parent 8908d68bf3
commit a3e264c7d1
1 changed files with 39 additions and 17 deletions

View File

@ -154,6 +154,8 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
var DATA_MOVE_NAME = 'LAY_TABLE_MOVE_DICT';
var resizeObserver = lay._createResizeObserver(MOD_NAME);
// thead 区域模板
var TPL_HEADER = function(options){
var rowCols = '{{#var colspan = layui.type(item2.colspan2) === \'number\' ? item2.colspan2 : item2.colspan; if(colspan){}} colspan="{{=colspan}}"{{#} if(item2.rowspan){}} rowspan="{{=item2.rowspan}}"{{#}}}';
@ -288,6 +290,7 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
var that = this;
that.index = ++table.index;
that.config = $.extend({}, that.config, table.config, options);
that.unobserveResize = $.noop;
that.render();
};
@ -318,6 +321,11 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
options.elem.attr('id') || that.index
);
// 重复 render 时清理旧实例
if(thisTable.that[id] && thisTable.that[id] !== that){
thisTable.that[id].dispose();
}
thisTable.that[id] = that; // 记录当前实例对象
thisTable.config[id] = options; // 记录当前实例配置项
@ -460,7 +468,7 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
that.pullData(that.page); // 请求数据
that.events(); // 事件
that.autoResize();
that.observeResize(); // 观察尺寸变化
};
// 根据列类型,定制化参数
@ -2928,13 +2936,16 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
}
};
Class.prototype.createResizeObserver = function(){
Class.prototype.dispose = function(){
var that = this;
if(that.resizeObserver){
that.resizeObserver.disconnect();
that.resizeObserver = null;
that.unobserveResize();
for (const propName in that) {
if(lay.hasOwn(that, propName) && propName !== 'config'){
that[propName] = null;
}
}
that.resizeObserver = lay._createResizeObserver('table-' + that.config.id);
}
Class.prototype.syncFixedColHeight = function(){
@ -2945,13 +2956,12 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
var rightTrs = that.layFixRight.find('>.layui-table-body>table>tbody>tr');
var mainTrs = tableElem.find('>tbody>tr');
// 批量获取高度
// 批量获取主表格行高,设置高度以优化性能
var heights = [];
mainTrs.each(function() {
heights.push(that.getElementSize(this).height);
});
// 批量设置高度
if (leftTrs.length) {
leftTrs.each(function(i) {
if (heights[i]) {
@ -2969,27 +2979,39 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
}
}
Class.prototype.autoResize = function(){
Class.prototype.observeResize = function(){
var that = this;
that.createResizeObserver();
if(!that.resizeObserver) return;
if(!resizeObserver) return;
that.unobserveResize();
var el = that.elem[0];
var tableEl = that.layMain.children('table')[0];
// 显示或隐藏时重置列宽
that.resizeObserver.observe(that.elem[0], $.proxy(that.resize, that));
resizeObserver.observe(el, $.proxy(that.resize, that));
// 同步固定列表格和主表格高度
var lineStyle = that.config.lineStyle;
var isAutoHeight = lineStyle && (/\bheight\s*:\s*auto\b/g.test(lineStyle) || lineStyle.indexOf('max-height') !== -1);
that.needSyncFixedColHeight = (that.layBody.length > 1) && (that.config.syncFixedRowHeight || (that.config.syncFixedRowHeight !== false && isAutoHeight));
// 只重载数据时需要主动同步高度,因为 tbody 大小可能不变
var needSyncFixedColHeight = that.needSyncFixedColHeight = (that.layBody.length > 1) && (that.config.syncFixedRowHeight || (that.config.syncFixedRowHeight !== false && isAutoHeight));
if(that.needSyncFixedColHeight){
that.resizeObserver.observe(
that.layMain.children('table')[0],
if(needSyncFixedColHeight){
resizeObserver.observe(
tableEl,
$.proxy(that.syncFixedColHeight, that)
);
}
that.unobserveResize = function(){
resizeObserver.unobserve(el);
if(needSyncFixedColHeight){
resizeObserver.unobserve(tableEl);
}
that.unobserveResize = $.noop;
}
};
// 全局事件