|
先上效果图
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
}
})
},
})
| 
转播
