原生小程序渲染复杂表格

qq_45208940

已于 2023-10-27 14:44:54 修改

阅读量137

点赞数

文章标签：小程序

于 2023-10-25 15:24:47 首次发布

本文链接：https://blog.csdn.net/qq_45208940/article/details/134035811

版权

遇到了这个需求，但是小程序好坑，不支持原生表格那一套，我们可以利用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;
}