原生小程序渲染复杂表格

遇到了这个需求,但是小程序好坑,不支持原生表格那一套,我们可以利用flex布局来实现复杂表格

实现方法:

页面

<view class='table-container' style="width: 105%;">
            <view class='table-wrapper'>
              <view class='row1 bg-title' wx:for='{{waterTitle}}' wx:key='index'>
                <text class='text label'>{{item.title}}</text>
                <view class='column2-wrapper'>
                  <view class='column2' wx:for='{{item.other}}' wx:for-item='item2' wx:key='index'>
                    <text class='text'>{{item2.pollutants}}</text>
                    <text class="text">{{item2.permit}}</text>
                    <text class="text">{{item2.actual}}</text>
                  </view>
                </view>
                <text class='text label'>{{item.name}}</text>
              </view>
              <view class='row1' wx:for='{{water}}' wx:key='index'>
                <text class='text label'>{{item.type}}</text>
                <view class='column2-wrapper'>
                  <view class='column2' wx:if='{{item.water.length > 0}}' wx:for='{{item.water}}' wx:for-item='item2' wx:key='index'>
                    <text class='text'>{{item2.pollution}}</text>
                    <text class="text">排放浓度:{{item2.permit_value || '/'}}\n排放总量:{{item.permit_all || '/'}}</text>
                    <text class="text" style="border-right: 1rpx solid #dcdfe6;">排放浓度:{{item2.actual_avg || '/'}}\n排放总量:{{item2.actual_all || '/'}}</text>
                  </view>
                </view>
                <text class='text' style="border-left: none;">{{item.pollution_hole_name}}</text>
              </view>
            </view>
          </view>

返回数据格式:

water:[{
pollution_hole_name: "武汉经济技术开发区污水处理厂总排口"
type: "DW001"
water: Array(4)
0: {pollution: "化学需氧量", permit_value: "50", permit_all: "/", actual_max: "", actual_min: ""}
1: {pollution: "总磷(以P计)", permit_value: "0.5", permit_all: "/", actual_max: "", actual_min: ""}
2: {pollution: "总氮(以N计)", permit_value: "15", permit_all: "/", actual_max: "", actual_min: ""}
3: {pollution: "氨氮(NH3-N)", permit_value: "8", permit_all: "/", actual_max: "", actual_min: ""}
}]

css

.table-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fcfcfc;
}

.table-wrapper {
  width: 100%;
  display: flex;
  /* font-size: 22rpx; */
  flex-direction: column;
  vertical-align: middle;
  border-top: 1px solid #DCDFE6;
  border-left: 1px solid #DCDFE6;
  border-right: 1px solid #DCDFE6;
}

.bg-title {
  background: #f9f9f9;
}

.row1 {
  display: table-row;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #34323d;
  box-sizing: border-box;
  border-bottom: 1px solid #DCDFE6;
}

.row1 text {
  display: table-cell;
  padding: 15rpx;
  border-left: 1px solid #DCDFE6;
}

.table-wrapper .lable {
  padding: 15rpx 20rpx;
}

.table-wrapper .text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 15rpx 0rpx;
  text-align: center;
}

.text:nth-child(1) {
  border-left: none;
}

.column2-wrapper {
  display: flex;
  flex-direction: column;
  flex: 4;
  justify-content: center;
  border-left: 1px solid #DCDFE6;
}

.column2 {
  display: flex;
  flex: 1;
  align-items: stretch;
  word-wrap: break-word;
  border-bottom: 1px solid #DCDFE6;
}

.column2:last-child {
  border-bottom: none;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值