效果图（支持单元格样式自定义）
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.jsComponent({ /** * 组件的属性列表 */ 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;}