支付宝小程序开发表格组件（可固定首行、首列）

此表格目前仅实现了固定首行、首列功能，但滚动到底部会触发函数，可以通过该方法实现上拉加载的功能。

page.axml

<view class="com-table-temp-wrap">
  <view class="table__box">
    <scroll-view scroll-x scroll-left="{{scrollLeft}}" disable-scroll class="table__head_wrap">
      <view class="table__head" style="width: {{tableWidth}}rpx;">
        <view
          a:for="{{headList}}"
          a:for-index="attrIndex"
          a:for-item="attrItem"
          class="table__head__td"
          a:key="attrIndex"
          style="width: {{attrItem.width || 150}}rpx;"
        >
          <text class="table__head__td__text">{{attrItem.label}}</text>
        </view>
      </view>
    </scroll-view>
    <scroll-view a:if="{{ list.length }}" scroll-y class="table" onScrollToLower="handleScrollToLower">
      <scroll-view scroll-x="true" onScroll="scrollX">
        <view
          a:for="{{list}}"
          a:for-index="dataIndex"
          a:for-item="dataItem"
          class="table__row"
          a:key="dataIndex"
          style="width: {{tableWidth}}rpx;"
        >
          <text class="table__row__td {{headItem.className}}" style="width: {{headItem.width || 150}}rpx;" a:for="{{ headList }}" a:for-item="headItem">{{dataItem[headItem.prop]}}</text>
        </view>
      </scroll-view>
    </scroll-view>
    <ant-empty className="bg-white" a:else message="暂无数据" />
  </view>
</view>

page.acss

.com-table-temp-wrap{
  height: 100%;
}
.com-table-temp-wrap ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  
}

.com-table-temp-wrap .table__box {
  border: 1rpx solid #ecf1f8;
  border-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.com-table-temp-wrap .table__box .table__head_wrap{
  flex: 0 0 60rpx;
}
.com-table-temp-wrap .table__box .table{
  flex: 1 1 auto;
}

.com-table-temp-wrap .table__head {
  position: sticky;
  top: 0rpx;
  z-index: 100;
  /* width: 1380rpx; */
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  white-space: nowrap;
  font-size: 24rpx;
  color: #969696;
  font-weight: 400;
  border-bottom: 2rpx solid #ecf1f8;
  background-color: #ffffff;
}

.com-table-temp-wrap .table__head__td {
  position: relative;
  /* width: 150rpx; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.com-table-temp-wrap .table__head__td:nth-child(1) {
  /* width: 180rpx; */
  position: sticky;
  z-index: 101;
  left: -1rpx;
}


.com-table-temp-wrap .table {
  display: block;
  position: relative;
  overflow: scroll;
  width: 100%;
  height: 260rpx;
}

.com-table-temp-wrap .table__row {
  /* width: 1380rpx; */
  height: 60rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  white-space: nowrap;
  border-bottom: 2rpx solid #ecf1f8;
}

.com-table-temp-wrap .table__row__td {
  /* width: 150rpx; */
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  font-size: 26rpx;
  background-color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.com-table-temp-wrap .table__row__td:nth-child(1) {
  /* width: 180rpx; */
  position: sticky;
  z-index: 10;
  left: 0;
}

.com-table-temp-wrap .ant-empty{
  margin-top: 0;
}

page.js

Component({
  mixins: [],
  props: {
    tableColumn: {
      type: Array,
      default: () => ([])
    },
    tableData: {
      type: Array,
      default: () => ([])
    }
  },
  data: {
    scrollLeft: 0,
    headList: [],
    list: [],
    tableWidth: 0
  },
  didMount() {
    let {
      tableColumn,
      tableData
    } = this.props;

    let tableWidth = tableColumn.reduce((count, curVal) => count + Number(curVal.width || 150), 0);


    this.setData({
      tableWidth,
      headList: tableColumn || [],
      list: tableData || [],
    })
  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    // 触底事件
    handleScrollToLower() {
      console.log('scroll-view触底事件在这里处理加载下一页数据')
    },
    //监听左右滚动
    scrollX(e) {
      if (e.detail.scrollLeft > 0) {
        this.setData({
          scrollLeft: e.detail.scrollLeft,
        });
      } else {
        this.setData({
          scrollLeft: 0,
        });
      }
    },
  },
});

page.json

{
  "component": true,
  "usingComponents": {
    "ant-empty": "antd-mini/es/Empty/index"
  }
}

效果图

支付宝小程序-表格组件