微信小程序原生实现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: 1px solid #DBDBDB;
  text-align: center;
  font-weight: bold;
  font-size: 24rpx;
  font-weight: 400;
  color: #000000;
  box-sizing: border-box;
}
.th-border {
  border-right: 1px solid #DBDBDB;
}
.th:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 99;
  background: #fafafa;
}
.th:nth-child(2) {
  position: sticky;
  left: 80rpx;
  z-index: 99;
  background: #fafafa;
}
.td {
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  padding: 10rpx;
  border-bottom: 1px solid #DBDBDB;
  text-align: center;
  box-sizing: border-box;
}
.td-border {
  border-right: 1px solid #DBDBDB;
}

.td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 80;
  background: #FFFFFF;
}

.td:nth-child(2) {
  position: sticky;
  left: 80rpx;
  z-index: 80;
  background: #FFFFFF;
}

js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    columns: {
      type: Array,
      value: [
        {
          key: "catname",
          title: "类目",
          width: 80
        },
        {
          key: "product_bar_code",
          title: "条形码",
          width: 150
        },
        {
          key: "product_title",
          width: 200,
          title: "商品1"
        },
        {
          key: "product_title",
          width: 200,

          title: "商品2"
        },
        {
          key: "product_title",
          width: 200,
          title: "商品3"
        },
        {
          key: "quantity",
          width: 200,
          title: "数量"
        }
      ]
    },
    tableData: {
      type: Array,
      value: [
        {
          catname: 1,
          product_bar_code: "1234567",
          product_title: "可乐佛挡杀佛的范德萨范德萨手打放大放大",
          quantity: "12"
        },
        {
          catname: 2,
          product_bar_code: "45633423",
          product_title: "雪碧",
          quantity: "23"
        },
        {
          catname: 3,
          product_bar_code: "3426767456",
          product_title: "乐事",
          quantity: "31"
        },
        {
          catname: 4,
          product_bar_code: "2345654",
          product_title: "香草片",
          quantity: "44"
        },
        {
          catname: 5,
          product_bar_code: "7654565",
          product_title: "郁金香",
          quantity: "55"
        },
        {
          catname: 6,
          product_bar_code: "345435",
          product_title: "可口可乐",
          quantity: "11"
        },
        {
          catname: 7,
          product_bar_code: "235436543",
          product_title: "爱马仕",
          quantity: "23"
        },
        {
          catname: 8,
          product_bar_code: "66543456",
          product_title: "古驰",
          quantity: "12"
        },
        {
          catname: 9,
          product_bar_code: "87656754",
          product_title: "苹果",
          quantity: "12"
        },
        {
          catname: 10,
          product_bar_code: "45678987654",
          product_title: "栗子",
          quantity: "42"
        },
        {
          catname: 11,
          product_bar_code: "4567765434",
          product_title: "可水果乐",
          quantity: "12"
        },
        {
          catname: 12,
          product_bar_code: "458765",
          product_title: "翅果",
          quantity: "42"
        },
        {
          catname: 13,
          product_bar_code: "34544",
          product_title: "香蕉",
          quantity: "45"
        },
        {
          catname: 14,
          product_bar_code: "345654324",
          product_title: "相机",
          quantity: "7"
        },
        {
          catname: 15,
          product_bar_code: "8986",
          product_title: "渔家",
          quantity: "8"
        },
        {
          catname: 1,
          product_bar_code: "1234567",
          product_title: "可乐",
          quantity: "12"
        },
        {
          catname: 2,
          product_bar_code: "45633423",
          product_title: "雪碧",
          quantity: "23"
        },
        {
          catname: 3,
          product_bar_code: "3426767456",
          product_title: "乐事",
          quantity: "31"
        },
        {
          catname: 4,
          product_bar_code: "2345654",
          product_title: "香草片",
          quantity: "44"
        },
        {
          catname: 5,
          product_bar_code: "7654565",
          product_title: "郁金香",
          quantity: "55"
        },
        {
          catname: 6,
          product_bar_code: "345435",
          product_title: "可口可乐",
          quantity: "11"
        },
        {
          catname: 7,
          product_bar_code: "235436543",
          product_title: "爱马仕",
          quantity: "23"
        },
        {
          catname: 8,
          product_bar_code: "66543456",
          product_title: "古驰",
          quantity: "12"
        },
        {
          catname: 9,
          product_bar_code: "87656754",
          product_title: "苹果",
          quantity: "12"
        },
        {
          catname: 10,
          product_bar_code: "45678987654",
          product_title: "栗子",
          quantity: "42"
        },
        {
          catname: 11,
          product_bar_code: "4567765434",
          product_title: "可水果乐",
          quantity: "12"
        },
        {
          catname: 12,
          product_bar_code: "458765",
          product_title: "翅果",
          quantity: "42"
        },
        {
          catname: 13,
          product_bar_code: "34544",
          product_title: "香蕉",
          quantity: "45"
        },
        {
          catname: 14,
          product_bar_code: "345654324",
          product_title: "相机",
          quantity: "7"
        },
        {
          catname: 15,
          product_bar_code: "8986",
          product_title: "渔家",
          quantity: "8"
        }
      ]
    },
    // 表格高度
    height: {
      type: Number,
      value: 500
    },
    // 表格宽度
    width: {
      type: Number,
      value: 1030
    },
    border: {
      type: Boolean,
      value: true
    }
  },
  options: {
    styleIsolation: "apply-shared",
    multipleSlots: true
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      // console.log(this.properties.columns[3].format(-1));
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    }
  },
  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    handleScrollToLower(e) {
      if (e.detail.direction === "bottom") {
        console.log(e)
        this.triggerEvent("openMore")
      }
    }
  }
})

json文件

{
  "component": true,
  "usingComponents": {
  }
}