微信小程序原生实现table组件, 第二弹，支持横向和纵向滚动（固定列，可设置边框）

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5e6cb1a645584c9dbf27b6bd1ab9465e.png

table组件代码

wxml文件

<!-- 表格 -->
<view class="table">
  <scroll-view
    enable-flex
    scroll-y
    scroll-x
    style="height:{
   {height}}rpx; flex-direction: row;"
    bindscrolltolower="handleScrollToLower"
    class="{
   {border && 'table-container'}}"
  >
    <view style="width:{
   {width}}rpx">
      <!-- 表头 -->
      <view class="tr-th">
        <view
          wx:for="{
   {columns}}"
          wx:for-item="column"
          wx:key="index"
          style="width:{
   {column.width || 200}}rpx"
          class="{
   {border && 'th-border'}} th"
          >{
   {
   column.title}}
        </view>
      </view>
      <!-- 内容 -->
      <!-- 除表头外纵向滑动 -->
      <view class="tr" wx:for="{
   {tableData}}" wx:for-item="table" wx:key="index">
        <view
          style="width:{
   {columnItem.width || 200}}rpx"
          class="{
   {border && 'td-border'}} td"
          wx:for="{
   {columns}}"
          wx:for-item="columnItem"
          wx:for-index="columnIndex"
          wx:key="columnIndex"
        >
          {
   {
    table[columnItem.key] || '-'}}
        </view>
      </view>
    </view>
  </scroll-view>
</view>

wxss文件

/* 项目表格 */
.table {
   
  position: relative;
  background: #FFFFFF;
  box-shadow: 0px 0px 10rpx 0px rgba(32,76,131,0.12);
  border-radius: 20rpx ;
  box-sizing: border-box;
  padding: 40rpx 0rpx 0rpx 20rpx;
}
.table-container {
   
  border: 1px solid #DBDBDB;
  border-bottom: none;
}
.tr {
   
  display: flex;
}

.tr-th {
   
  display: flex;
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fafafa;
}
.th{
   
  padding: 10rpx;
  border-bottom