微信小程序表格封装（可以直接用）

先上效果图

table.wxml

<template name="tableTemp">
    <scroll-view class="table-wrap" scroll-x="{{true}}">
<view>
    <view class="table">
        <view class="tr">
            <block wx:for="{{title}}" wx:key="{{index}}">
            <view class="th left">{{item}}</view>
            </block>
<!--            <view class="th th2 left">数量</view>-->
        </view>
        <view class="tr" wx:for="{{contentItem}}" wx:key="index">
            <block wx:for="{{item}}" wx:key="index">
                <view class="td left">{{item}}</view>
            </block>

<!--            <view class="td td2 left"><text class="item_value_font_color">{{item.feedMateriel1}}</text></view>-->
        </view>
    </view>
</view>
    </scroll-view>
</template>

table.wxss

/*表格*/
.table-wrap{
    width: 96%;
    /*margin-left: 1.6%;*/
    /*margin: 14rpx;*/
    top: 20rpx;
    /*overflow-y: scroll;*/
    /*overflow-x: hidden;*/
}
/* 表格代码   */
.table{
    background-color: white;
    border:1px solid #dadada;
    border-right:0;
    border-bottom: 0;
    width: 98%;
}
.tr{
    width:100%;
    display: flex;
    justify-content: space-between;
}
.th{
    padding: 3px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: center;
    width: 100%;
    /*font-weight: 800;*/
    background-color: rgba(139, 182, 155, 0.12);
    font-size: 28rpx;
    color: rgba(23, 21, 23, 0.73);
}
.td{
    padding: 3px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: center;
    width: 100%;
    font-size: 28rpx;
    color: #666666;
}

.left{
    text-align: left;
}

表格调用

index.wxml

<import src="../component/table/table.wxml"/>

<view class="tb1">
        <template is="tableTemp" data="{{...tableInfo}}"/>
    </view>

index.js

page({

data:{

    tableInfo: {},
}


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


    let item1 = ["col1", "col2", "col3","col4","col5"];
    let item2 = ["col4", "col5", "col6","col7","col8"];
    let item = [];
    for (let i = 0; i < 9; i++) {
      item.push(item1);
      item.push(item2)
    }
    this.setData({
      tableInfo:{
        title:["第一","第二","第三","第四","第五"],
        contentItem: item
      }
    })
  },

})