微信小程序——多级表头表格

最新推荐文章于 2024-12-01 17:12:28 发布

菜鸟·Lee

最新推荐文章于 2024-12-01 17:12:28 发布

阅读量1.8k

点赞数 4

文章标签：小程序 table-view 多级表头组件递归 headerList

本文链接：https://blog.csdn.net/weixin_41144016/article/details/125197319

版权

*****因为小程序不支持table，没办法只能通过组件递归的方式实现多级表头的渲染

/**
 * 这是表头数据格式
   */
headerList: [
  {
      "name":"city_name",
      "text":"单位",
      "width": "10",
  },
  {
      "name":"city_name",
      "text":"a",
      "width": "70",
      "children":[
          {
              "name":"city_name",
              "text":"a01",
              "width": "50",
              "children": [
                {
                  "name":"city_name",
                  "text":"a01-1",
                  "width": "50",
                },
                {
                  "name":"city_name",
                  "text":"a01-2",
                  "width": "50",
                }
              ]
          },
          {
              "name":"city_name",
              "text":"a02",
              "width": "50",
              "children": [
                {
                  "name":"city_name",
                  "text":"a02-1",
                  "width": "50",
                },
                {
                  "name":"city_name",
                  "text":"a02-2",
                  "width": "50",
                }
              ]
          }
      ]
  },
  {
      "name":"city_name",
      "text":"b",
      "width": "20",
      "children":[
        {
            "name":"city_name",
            "text":"b01",
            "width": "50",
        },
        {
            "name":"city_name",
            "text":"b02",
            "width": "50",
        }
      ]
  }
],

<view class="table">
    <!-- 表头tableheader -->
    <view class="tr">
    <!-- tableView是小程序里面的自定义组件 -->
      <table-view class="td" wx:for="{{headerList}}" wx:key="id" wx:for-item="value" item="{{value}}" style="width:{{value.width}}%"></table-view>
    </view>
  </view>

 .table {
  background-color: #ffffff;
  width: 100%;
  font-size: 24rpx;
  color: #333333;
  box-sizing: border-box;
}
.table .tr {
  background-color: #e7f4ff;
  color: #000000;
  font-size: 18rpx;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  border-bottom: 2rpx solid #d3ebff;
  border-left: 2rpx solid #d3ebff;
  border-top: 2rpx solid #d3ebff;
}

** PS：这里需要注意的是table-view组件一定要注册在app.json里面**

<!-- tableView组件 -->
<view class="children-box" wx:if="{{item.children}}">
  <view class="span">{{item.text}}</view>
  <view class="flex-box">
    <table-view class="td" style="width:{{val.width}}%;" wx:for="{{item.children}}" wx:key="i" wx:for-item="val" item="{{val}}"></table-view>
  </view>
</view>
<view wx:else class="inner-box">{{item.text}}</view>

 /* tableView组件样式 */
.children-box{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex-box{
  display: flex;
  flex:1;
  justify-content: flex-end;
  align-items: flex-end;
}

.span{
  height: 30rpx;
}

.inner-box{
  /* width: 100%; */
  min-height: 40rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.td{
  height: 100%;
}

.span, .inner-box{
  border-bottom: 2rpx solid #d3ebff;
  border-right: 2rpx solid #d3ebff;
}