@liuzengwei/element-ui 2.15.5-xn.21 → 2.15.5-xn.22

package/lib/element-ui.common.js

@@ -9739,6 +9739,13 @@ var tablevue_type_template_id_493fe34e_render = function() {
         [_vm._t("default")],
         2
       ),
+      _vm.showHeader && _vm.stickyHeader !== false
+        ? _c("div", {
+            ref: "headerPlaceholder",
+            staticClass: "el-table__header-placeholder",
+            style: { height: "0px", visibility: "hidden" }
+          })
+        : _vm._e(),
       _vm.showHeader
         ? _c(
             "div",
@@ -13761,6 +13768,13 @@ var tablevue_type_script_lang_js_extends = Object.assign || function (target) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -14051,6 +14065,101 @@ var tableIdSeed = 1;
     },
     toggleAllSelection: function toggleAllSelection() {
       this.store.commit('toggleAllSelection');
+    },
+
+
+    // 初始化 sticky 滚动处理
+    initStickyScroll: function initStickyScroll() {
+      var _this = this;
+
+      if (this.stickyHeader === false) return;
+
+      this.$nextTick(function () {
+        var headerWrapper = _this.$refs.headerWrapper;
+        var headerPlaceholder = _this.$refs.headerPlaceholder;
+        if (!headerWrapper) return;
+
+        _this.stickyScrollHandler = function () {
+          var tableRect = _this.$el.getBoundingClientRect();
+          var stickyOffset = typeof _this.stickyHeader === 'number' ? _this.stickyHeader : 0;
+
+          // 判断是否应该吸顶
+          var shouldStick = tableRect.top <= stickyOffset;
+          var shouldUnstick = tableRect.bottom <= headerWrapper.offsetHeight + stickyOffset;
+
+          if (shouldStick && !shouldUnstick) {
+            // 需要吸顶
+            if (!headerWrapper.classList.contains('is-fixed')) {
+              // 设置占位符高度，防止页面跳动
+              if (headerPlaceholder) {
+                headerPlaceholder.style.height = headerWrapper.offsetHeight + 'px';
+                headerPlaceholder.style.visibility = 'visible';
+              }
+
+              headerWrapper.classList.add('is-fixed');
+              headerWrapper.style.position = 'fixed';
+              headerWrapper.style.top = stickyOffset + 'px';
+              headerWrapper.style.left = tableRect.left + 'px';
+              headerWrapper.style.width = tableRect.width + 'px';
+              headerWrapper.style.zIndex = '2000';
+              headerWrapper.style.backgroundColor = '#fff';
+            } else {
+              // 更新位置（处理水平滚动）
+              headerWrapper.style.left = tableRect.left + 'px';
+            }
+          } else {
+            // 不需要吸顶，恢复原状
+            if (headerWrapper.classList.contains('is-fixed')) {
+              headerWrapper.classList.remove('is-fixed');
+              headerWrapper.style.position = '';
+              headerWrapper.style.top = '';
+              headerWrapper.style.left = '';
+              headerWrapper.style.width = '';
+              headerWrapper.style.zIndex = '';
+              headerWrapper.style.backgroundColor = '';
+
+              // 隐藏占位符
+              if (headerPlaceholder) {
+                headerPlaceholder.style.height = '0px';
+                headerPlaceholder.style.visibility = 'hidden';
+              }
+            }
+          }
+        };
+
+        // 监听 window 滚动
+        window.addEventListener('scroll', _this.stickyScrollHandler, { passive: true });
+        // 监听 window resize
+        window.addEventListener('resize', _this.stickyScrollHandler, { passive: true });
+      });
+    },
+
+
+    // 销毁 sticky 滚动处理
+    destroyStickyScroll: function destroyStickyScroll() {
+      if (this.stickyScrollHandler) {
+        window.removeEventListener('scroll', this.stickyScrollHandler);
+        window.removeEventListener('resize', this.stickyScrollHandler);
+
+        // 清理样式
+        var headerWrapper = this.$refs.headerWrapper;
+        var headerPlaceholder = this.$refs.headerPlaceholder;
+        if (headerWrapper && headerWrapper.classList.contains('is-fixed')) {
+          headerWrapper.classList.remove('is-fixed');
+          headerWrapper.style.position = '';
+          headerWrapper.style.top = '';
+          headerWrapper.style.left = '';
+          headerWrapper.style.width = '';
+          headerWrapper.style.zIndex = '';
+          headerWrapper.style.backgroundColor = '';
+        }
+        if (headerPlaceholder) {
+          headerPlaceholder.style.height = '0px';
+          headerPlaceholder.style.visibility = 'hidden';
+        }
+
+        this.stickyScrollHandler = null;
+      }
     }
   },
 
@@ -14204,15 +14313,15 @@ var tableIdSeed = 1;
   },
 
   created: function created() {
-    var _this = this;
+    var _this2 = this;
 
     this.tableId = 'el-table_' + tableIdSeed++;
     this.debouncedUpdateLayout = Object(external_throttle_debounce_["debounce"])(50, function () {
-      return _this.doLayout();
+      return _this2.doLayout();
     });
   },
   mounted: function mounted() {
-    var _this2 = this;
+    var _this3 = this;
 
     this.bindEvents();
     this.store.updateColumns();
@@ -14226,7 +14335,7 @@ var tableIdSeed = 1;
     // init filters
     this.store.states.columns.forEach(function (column) {
       if (column.filteredValue && column.filteredValue.length) {
-        _this2.store.commit('filterChange', {
+        _this3.store.commit('filterChange', {
           column: column,
           values: column.filteredValue,
           silent: true
@@ -14234,10 +14343,16 @@ var tableIdSeed = 1;
       }
     });
 
+    // 初始化滚动容器检测
+    if (this.stickyHeader !== false) {
+      this.initStickyScroll();
+    }
+
     this.$ready = true;
   },
   destroyed: function destroyed() {
     this.unbindEvents();
+    this.destroyStickyScroll();
   },
   data: function data() {
     var _treeProps = this.treeProps,
@@ -14273,7 +14388,9 @@ var tableIdSeed = 1;
       },
       // 是否拥有多级表头
       isGroup: false,
-      scrollPosition: 'left'
+      scrollPosition: 'left',
+      // sticky 滚动处理函数
+      stickyScrollHandler: null
     };
   }
 });
@@ -44332,7 +44449,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 /* harmony default export */ var src_0 = __webpack_exports__["default"] = ({
-  version: '2.15.5-xn.21',
+  version: '2.15.5-xn.22',
   locale: lib_locale_default.a.use,
   i18n: lib_locale_default.a.i18n,
   install: src_install,