微信小程序表格组件封装

table.wxml

    <scroll-view class="table-wrap" scroll-x="{{true}}">
<view>
    <view class="table">
        <view class="tr">
            <block wx:for="{{headers}}" wx:key="{{index}}">`在这里插入代码片`
            <view class="th left">{{item}}</view>
            </block>
        </view>
        <view class="tr" wx:for="{{list}}" wx:key="index">
            <block wx:for="{{item}}" wx:key="index">
                <view class="td left">{{item}}</view>
            </block>
        </view>
    </view>
</view>
    </scroll-view>

table.wxss

.table-wrap{
    width: 100%;
    top: 20rpx;
}
.table{
    background-color: white;
    border:1px solid #dadada;
    border-right:0;
    border-bottom: 0;
    width: 100%;
}
.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;
}
 

**table.js**
  properties: {
list: {
  type: Array,
  value: []
},
headers: {
  type: Array,
  value: []
},
hasBorder: {
  type: String,
  value: "no"
},

},
在JSON文件中引入
“usingComponents”: {
“mytable”:"…/…/components/table/table"
}
其他的页面使用

<mytable list="{{list}}" headers="{{headers}"></mytable>

**页面JS部分**

data: {
headers: [“第一”, “第二”, “第三”, “第四”, “第五”],
list:[[100,100,100,100,100],[200,200,200,200,200]]
},
效果图