From 6c4e1669c68ab7001a2c0144a8017e94c1404a2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A4=A9=E5=BA=86?= <15732624130@163.com>
Date: Thu, 15 Jan 2026 15:04:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BA=E5=AE=9A=E5=88=97=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现表格列的左右固定功能，添加sticky定位和偏移计算
- 优化表格行点击事件，传递完整数据集
- 增加表格列对齐方式配置

fix: 修复rowClick时row、column值赋值相反的问题
---
 README.md      |  2 +-
 src/index.js   | 36 +++++++++++++++++++++++++++++++++---
 src/index.wxml | 34 ++++++++++++++++------------------
 src/index.wxss |  1 -
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index be12421..e111a12 100755
--- a/README.md
+++ b/README.md
@@ -150,7 +150,7 @@ Page({
 
 配置项 | 说明 | 类型  | 可选值 | 默认值 | 必填
 ---|---|---|---|---|---
-headers | 表格头部标题、列宽度、列属性 | Array | `{prop: 'datetime', width: 150, label: '日期'}` | [] | yes
+headers | 表格头部标题、列宽度、列属性 | Array | `{prop: 'datetime', width: 150, label: '日期',align:'center',fixed:'left'}` | [] | yes
 data | 表格列表数据 | Array | | [] | no
 stripe | 是否为斑马纹 | boolean | true/false | false | no
 border | 是否有间隔线 | boolean | true/false | false | no
diff --git a/src/index.js b/src/index.js
index 4c89b36..a505c49 100755
--- a/src/index.js
+++ b/src/index.js
@@ -63,7 +63,8 @@ Component({
    * 组件的初始数据
    */
   data: {
-    scrolWidth: '100%'
+    scrolWidth: '100%',
+    columns: []
   },
 
   /**
@@ -72,13 +73,42 @@ Component({
   observers: {
     // 在 numberA 或者 numberB 被设置时，执行这个函数
     'headers': function (headers) {
+      if (!headers) return;
+      
       const reducer = (accumulator, currentValue) => {
         return accumulator + Number(currentValue.width)
       };
       const scrolWidth = headers.reduce(reducer, 0)
 
+      // Calculate sticky offsets
+      let leftOffset = 0;
+      let rightOffset = 0;
+      
+      const columns = headers.map(h => ({...h}));
+
+      // Calculate Left Offsets
+      for (let i = 0; i < columns.length; i++) {
+        if (columns[i].fixed === 'left') {
+          columns[i].stickyLeft = leftOffset;
+          leftOffset += Number(columns[i].width);
+          columns[i].isFixed = true;
+          columns[i].fixDirection = 'left';
+        }
+      }
+
+      // Calculate Right Offsets
+      for (let i = columns.length - 1; i >= 0; i--) {
+        if (columns[i].fixed === 'right') {
+          columns[i].stickyRight = rightOffset;
+          rightOffset += Number(columns[i].width);
+          columns[i].isFixed = true;
+          columns[i].fixDirection = 'right';
+        }
+      }
+
       this.setData({
-        scrolWidth: scrolWidth
+        scrolWidth: scrolWidth,
+        columns: columns
       })
     }
   },
@@ -88,7 +118,7 @@ Component({
    */
   methods: {
     onRowClick(e) {
-      this.triggerEvent('rowClick', e, e.currentTarget.dataset.it)
+      this.triggerEvent('rowClick', e.currentTarget.dataset)
     },
   }
 })
\ No newline at end of file
diff --git a/src/index.wxml b/src/index.wxml
index 24816d8..e4e0502 100755
--- a/src/index.wxml
+++ b/src/index.wxml
@@ -1,14 +1,14 @@
-<scroll-view scroll-x="true" style="width:100%;"  class="table table-border">
+<scroll-view scroll-x="true" scroll-y="true" class="table table-border" style="width:100%; height:{{ height ? height : 'auto' }};">
     <!-- 表格头 start -->
     <view 
         class="thead {{ border ? 'thead-border' : ''}} header-row-class-name" 
-        style="width:{{ scrolWidth }}rpx;"
+        style="width:{{ scrolWidth }}rpx; position: sticky; top: 0; z-index: 100; background: #fff;"
     >
       <view 
-        wx:for="{{ headers }}" 
-        wx:key="*this" 
+        wx:for="{{ columns }}" 
+        wx:key="index" 
         class="td" 
-        style="width:{{ item.width }}rpx;"
+        style="width:{{ item.width }}rpx; {{ item.isFixed ? 'position: sticky; z-index: 10; background: #fff;' : '' }} {{ item.fixDirection === 'left' ? 'left:' + item.stickyLeft + 'rpx;' : '' }} {{ item.fixDirection === 'right' ? 'right:' + item.stickyRight + 'rpx;' : '' }} text-align:{{ item.align ? item.align : 'center' }};"
       >
       {{ item.label }}
       </view>
@@ -16,30 +16,29 @@
     <!-- 表格头 end -->
     
     <!-- 表格体 start -->
-    <scroll-view 
-        scroll-y="true" 
+    <view 
         class="tbody"
-        style="width:{{ scrolWidth }}rpx; height:{{ height ? height : 'auto' }};" 
+        style="width:{{ scrolWidth }}rpx;" 
     >
       <block 
         wx:if="{{ data.length > 0 }}" 
         wx:for-item="it" 
         wx:for="{{ data }}" 
-        wx:key="*this" 
+        wx:key="idx" 
         wx:for-index="idx"
       >
         <view class="tbody-tr {{ stripe ? 'tbody-tr-stripe' : '' }} {{ border ? 'tbody-tr-border' : ''}} row-class-name">
           <view wx:for-item="head" 
-            wx:for="{{ headers }}" 
-            wx:key="*this" 
+            wx:for="{{ columns }}" 
+            wx:key="index" 
             class="td cell-class-name" 
             data-it="{{it}}" 
-            data-row="{{index}}" 
-            data-column="{{idx+1}}"
-            style="width:{{ headers[index].width }}rpx;color:{{ headers[index].color }};" 
+            data-row="{{idx}}" 
+            data-column="{{index}}"
+            style="width:{{ head.width }}rpx;color:{{ head.color }}; {{ head.isFixed ? 'position: sticky; z-index: 5;' : '' }} {{ head.fixDirection === 'left' ? 'left:' + head.stickyLeft + 'rpx;' : '' }} {{ head.fixDirection === 'right' ? 'right:' + head.stickyRight + 'rpx;' : '' }} background:{{ head.isFixed ? (stripe && idx % 2 === 1 ? '#F6F6F6' : '#fff') : '' }}; text-align:{{ head.align ? head.align : 'center' }};" 
             bindtap="onRowClick"
           >     
-          {{it[head["prop"]]}}
+          {{it[head["prop"]]|| '-'}}
           </view>        
         </view>
       </block>
@@ -47,7 +46,6 @@
       <block wx:if="{{ data.length === 0 }}">
         <view class="no-data">{{ msg }}</view>
       </block>
-    </scroll-view>
+    </view>
     <!-- 表格体 end -->
-</scroll-view>
-  
+</scroll-view>
\ No newline at end of file
diff --git a/src/index.wxss b/src/index.wxss
index f38f79a..af1883a 100755
--- a/src/index.wxss
+++ b/src/index.wxss
@@ -4,7 +4,6 @@
   background: #fff;  
   border-right:none;
   border-radius: 8rpx;  
-  overflow: hidden;
 }
 .thead{
   border-bottom: none;