微信小程序table封装及使用（高度可固定）

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; 
}```