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

package/lib/table.js

@@ -694,6 +694,13 @@ var 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",
@@ -4473,6 +4480,13 @@ var tablevue_type_script_lang_js_extends = Object.assign || function (target) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -4763,6 +4777,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;
+      }
     }
   },
 
@@ -4916,15 +5025,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();
@@ -4938,7 +5047,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
@@ -4946,10 +5055,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,
@@ -4985,7 +5100,9 @@ var tableIdSeed = 1;
       },
       // 是否拥有多级表头
       isGroup: false,
-      scrollPosition: 'left'
+      scrollPosition: 'left',
+      // sticky 滚动处理函数
+      stickyScrollHandler: null
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liuzengwei/element-ui",
-  "version": "2.15.5-xn.21",
+  "version": "2.15.5-xn.22",
   "description": "A Component Library for Vue.js (Fork of Element UI).",
   "main": "lib/element-ui.common.js",
   "files": [

package/packages/input-number/src/input-number.vue

@@ -290,14 +290,14 @@
       handleInputChange(value) {
         // 使用 parser 解析格式化的值
         let parsedValue = value;
-        
+
         // 先移除千分符
         if (this.thousandSeparator && value !== '') {
           const separator = this.thousandSeparator === true ? ',' : this.thousandSeparator;
           // 移除所有千分符
           parsedValue = parsedValue.split(separator).join('');
         }
-        
+
         // 再应用自定义 parser
         if (this.parser && parsedValue !== '') {
           parsedValue = this.parser(parsedValue);

package/packages/table/src/table.vue

@@ -15,6 +15,13 @@
     }, tableSize ? `el-table--${ tableSize }` : '']"
     @mouseleave="handleMouseLeave($event)">
     <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
+    <!-- sticky header 占位符 -->
+    <div
+      v-if="showHeader && stickyHeader !== false"
+      class="el-table__header-placeholder"
+      ref="headerPlaceholder"
+      :style="{ height: '0px', visibility: 'hidden' }">
+    </div>
     <div
       v-if="showHeader"
       v-mousewheel="handleHeaderFooterMousewheel"
@@ -505,6 +512,97 @@
 
       toggleAllSelection() {
         this.store.commit('toggleAllSelection');
+      },
+
+      // 初始化 sticky 滚动处理
+      initStickyScroll() {
+        if (this.stickyHeader === false) return;
+
+        this.$nextTick(() => {
+          const headerWrapper = this.$refs.headerWrapper;
+          const headerPlaceholder = this.$refs.headerPlaceholder;
+          if (!headerWrapper) return;
+
+          this.stickyScrollHandler = () => {
+            const tableRect = this.$el.getBoundingClientRect();
+            const stickyOffset = typeof this.stickyHeader === 'number' ? this.stickyHeader : 0;
+
+            // 判断是否应该吸顶
+            const shouldStick = tableRect.top <= stickyOffset;
+            const 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() {
+        if (this.stickyScrollHandler) {
+          window.removeEventListener('scroll', this.stickyScrollHandler);
+          window.removeEventListener('resize', this.stickyScrollHandler);
+
+          // 清理样式
+          const headerWrapper = this.$refs.headerWrapper;
+          const 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;
+        }
       }
 
     },
@@ -691,11 +789,17 @@
         }
       });
 
+      // 初始化滚动容器检测
+      if (this.stickyHeader !== false) {
+        this.initStickyScroll();
+      }
+
       this.$ready = true;
     },
 
     destroyed() {
       this.unbindEvents();
+      this.destroyStickyScroll();
     },
 
     data() {
@@ -727,7 +831,9 @@
         },
         // 是否拥有多级表头
         isGroup: false,
-        scrollPosition: 'left'
+        scrollPosition: 'left',
+        // sticky 滚动处理函数
+        stickyScrollHandler: null
       };
     }
   };

package/src/index.js

@@ -216,7 +216,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.5-xn.21',
+  version: '2.15.5-xn.22',
   locale: locale.use,
   i18n: locale.i18n,
   install,