diff --git a/src/modules/table.js b/src/modules/table.js index 1f657d7b..088fae2d 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -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; + } }; // 全局事件