table.wxml
<scroll-view scroll-x="true">
<view class="table">
<view class="tr">
<block wx:for="{{columns}}" wx:key="index">
<view class="th tw{{item.cwidth}} t{{item.t2rem}} ">{{ item.label }}</view>
</block>
</view>
<scroll-view scroll-x="true" scroll-y="true" style='height:{{tbodyHeight}};' class='tbody_scroll tbodyHeight{{tbodyHeight}} '>
<block wx:for="{{listData}}" wx:key="item">
<view class="tr borderbtm">
<block wx:for="{{columns}}" wx:for-item="cell" wx:key="cell">
<view class="td tw{{cell.cwidth}} t{{cell.t2rem}} ">{{ item[cell.prop] }}{{ cell.tail }}</view>
</block>
</view>
</block>
</scroll-view>
</view>
</scroll-view>
table.wxss
/* 表格 */
.table {
border: 0rpx solid #0f378f;
}
.tbody_scroll{
width: 100%;
}
.borderbtm {
border-bottom: 1rpx solid #0f378f;
}
.tr {
display: flex;
width: 100%;
justify-content:flex-start ;
align-items: center;
/* border-bottom: 1rpx solid #0f378f; */
}
.td {
justify-content: center;
text-align: center;
border: 0rpx solid #0f378f;
height: 3rem;
line-height: 3rem;
}
.th {
justify-content: center;
font-weight: 900;
display: flex;
height: 3rem;
align-items: center;
}
.t2rem {
height: 2rem !important;
line-height: 2rem;
}
.tw20{
width:20%;
}
.tw30{
width:30%;
}
.tw40{
width:40%;
}
.tw50{
width:50%;
}
.tw60{
width:60%;
}
.tw70{
width:70%;
}
.tw80{
width:80%;
}
.tw90{
width:90%;
}
table.js
Component({
behaviors: [],
/* 组件的属性列表 */
properties: {
// td
listData: {
type: Array,
value: ''
},
// th列
columns: {
type: Array,
value: ''
},
// 列宽
cwidth:{
type: Array,
value: ''
},
tbodyHeight: {
type: String,
value: ''
},
},
/* 组件的初始数据 */
data: {
//tbody滚动高度
tbodyHeight: 550 ,
},
/** * 组件的方法列表 */
methods: {
onLoad: function (options) {
var that = this;
wx.getStorage({
key: 'dataDate',
success: function (res) {
// console.log(res.data);
that.createTable(res.data);
}
});
wx.getSystemInfo({
success: function (res) {
var height = res.windowHeight - 80 / 750 * res.windowWidth;
that.setData({
tbodyHeight: height.toFixed(0)
})
}
})
},
}
})
table.json
{
"component": true,
"usingComponents": {}
}
使用例子
home.wxml
<!-- 表格 -->
<view class="intro" >
<view class="title">数据XX列表</view>
<Table listData="{{listData}}" columns="{{column}}" cwidth="{{cwidth}}" tbodyHeight="{{tbodyHeight}}" > </Table>
</view>
home.js
const app = getApp()
const apiService = require('../../../utils/request')
Page({
data: {
tbodyHeight:'78vh',
column:[
{ prop: "org_name", label:"机构名称" , cwidth:"80" , tail: "%"},
{ prop: "finalfailtime", label:"xx时间" , cwidth:"50"},
],
listData:[ ]
},
onLoad: function() {
var that = this;
that.getData()
},
//getData方法里发送ajax
getData(){
var that=this
// 数据列表
apiService.getDataFailHos({}).then(res => {
that.listData = res.data.value;
that.setData({listData:that.listData});
})
},
})
home.json
{
"component": true,
"usingComponents": {
"Table": "../../../table/table"
}
}
home.wxml
.intro {
text-align: center;
margin: 15rpx;
padding: 15rpx;
font-size: 25rpx;
}
.title {
text-align: center;
height: 38rpx;
line-height: 38rpx;
padding-bottom: 30rpx;
font-weight: 900;
font-size: 38rpx !important;
background: linear-gradient(to right, #1ae8c8, #4a8aff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}```