微信小程序原生实现无边框table组件支持横向和纵向滚动

效果图（支持单元格样式自定义）

table组件代码

wxml文件

<!-- 表格 -->
<view class="table">
  <!-- 整体横向滑动 -->
  <scroll-view class="tableX" scroll-x>
    <!-- 表头 -->
    <view class="tr">
      <view
        wx:for="{{columns}}"
        wx:for-item="column"
        wx:key="index"
        style="width:{{column.width || '200rpx'}}"
        class="th"
        >{{column.title}}
      </view>
    </view>
    <!-- 内容 -->
    <!-- 除表头外纵向滑动 -->
    <scroll-view class="tableY" scroll-y>
      <view class="tr" wx:for="{{tableData}}" wx:for-item="table" wx:key="index">
        <view
          style="border-bottom:{{index===tableData.length-1? 'none':'1px solid #DBDBDB'}};width:{{columnItem.width || '200rpx'}}"
          class="{{columnItem.class? 'td '+columnItem.class : 'td' }}"
          wx:for="{{columns}}"
          wx:for-item="columnItem"
          wx:for-index="columnIndex"
          wx:key="columnIndex"
          >{{table[columnItem.key]}}
        </view>
      </view>
    </scroll-view>
  </scroll-view>
</view>

wxss文件

/* 项目表格 */
.table {
  background: #FFFFFF;
  box-shadow: 0px 0px 10rpx 0px rgba(32,76,131,0.12);
  border-radius: 20rpx ;
  box-sizing: border-box;
  padding: 40rpx 20rpx 20rpx 20rpx;
}
.tableY {
  height: 500rpx;
}
.tr, .tableY {
  width: 900rpx;
}
.tr {
  display: flex;
}
.th{
  padding-bottom: 8rpx;
  border-bottom: 1px solid #26A13A;
  text-align: center;
  font-weight: bold;
  font-size: 20rpx;
  font-weight: 400;
  color: #000000;
}
.td {
  padding: 20rpx 0rpx;
  text-align: center;
  font-size: 18rpx;
  font-weight: 400;
  color: #666666;
}

js文件

// components/pr-table/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    columns: {
      type: Array,
      value: [],
    },
    tableData: {
      type: Array,
      value: [],
    },
  },
  options: {
    styleIsolation: 'apply-shared', //开启后可以通过page页面的wxss来修改组件的样式，主要用来对单元格样式自定义
  },
  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {},
});

组件使用

1、在page页面的json文件中引入组件（默认大家都会引入）；
2、在page页面的wxml文件中使用组件

<pr-table columns="{{columns}}" tableData="{{tableData}}" />

3、在page页面的js文件中设置数据

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tableData: [
      {
        product: '450冠草莓',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '高',
        oderDay: '05-10',
      },
      {
        product: '480屋顶包原味',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '中',
        oderDay: '05-07',
      },
      {
        product: '原味西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '红枣西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '450原味瓶',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '450冠草莓',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '高',
        oderDay: '05-10',
      },
      {
        product: '480屋顶包原味',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '中',
        oderDay: '05-07',
      },
      {
        product: '原味西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '红枣西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '450原味瓶',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
    ],
    columns: [
      { title: '产品', key: 'product', width: '200rpx' },
      { title: '规格', key: 'specifications', width: '200rpx' },
      { title: '是否新品', key: 'isNewProduct', class: 'newProduct', width: '100rpx' }, // class可以修改单元样式
      { title: '预估利润', key: 'estimatedProfit', class: 'estimatedProfit', width: '200rpx' },
      { title: '订单日', key: 'oderDay', class: 'oderDay', width: '200rpx' },
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getTabBar().init();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
});

4、在page页面的wxss文件中修改样式

page {
  box-sizing: border-box;
  background: #F2F3F7;
  padding: 0rpx 20rpx;
}

.newProduct {
  font-weight: bold !important;
  color: #71BDE4 !important;
}
.estimatedProfit {
  font-weight: bold !important;
  color: #EBD364 !important;
}
.oderDay {
  font-weight: bold !important;
  color: #F39E38 !important;
}