feat:添加固定列、列对齐方式功能并优化表格交互，以及控制台报错修复

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

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)
     },
   }
 })

src/index.wxml

@@ -1,53 +1,51 @@
-<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>
     </view>  
     <!-- 表格头 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>
       <!-- 列表无数据处理 -->
       <block wx:if="{{ data.length === 0 }}">
         <view class="no-data">{{ msg }}</view>
       </block>
-    </scroll-view>
+    </view>
     <!-- 表格体 end -->
-</scroll-view>
-
+</scroll-view>

src/index.wxss

@@ -4,7 +4,6 @@
   background: #fff;  
   border-right:none;
   border-radius: 8rpx;  
-  overflow: hidden;
 }
 .thead{
   border-bottom: none;