专有钉钉小程序的表格实现

.axml代码

<view class="wrap" style="z-index:999">
  <scroll-view scroll-x="{{true}}" class="scroll" scroll-y="{{true}}">
    <view class="table">
      <view class="theader flex" style="position: {{position}}">
        <view 
          class="th font-weight-bold " 
          a:for="{{labelList}}" 
          key="{{index}}" 
          style="width: {{labelList.length > 4 ? '170rpx' :`${100/labelList.length}%`}}"
        >
          <view class="th-item">
            {{item.label}}
          </view>
        </view>
      </view>
      <view class="tbody flex">
        <block a:if="{{propList.length > 0}}">
          <view 
            a:for="{{propList}}"
            key="{{index}}" 
            class="tr flex"
            onTap="openModal"
            data-attr="{{index}}"
          >
            <view 
              class="td"
              style="width: {{labelList.length > 4 && abelList.length !== 0 ? '170rpx' :`${100/labelList.length}%`}}"
              a:for="{{labelList}}" 
              a:for-item="itm" 
              a:for-index="idx"
              key="{{idx}}"
              
              
            >
              <view class="td-item" >
                {{item[itm.prop]}}
              </view>
            </view>
            
          </view>
        </block>
        <view a:else class="noData">暂无数据</view>
      </view>
      <view class="tfooter" a:if="{{summationData.length > 0}}">
        <view class="tr flex">
          <view 
            class="td" 
            a:for="{{summationData}}" 
            key="{{index}}" 
            style="width: {{summationData.length > 4 ? '170rpx' :`${100/labelList.length}%`}}"
          >
            <view class="td-item">{{item}}</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

.css代码

.wrap {
  margin: 50rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 10rpx rgba(25, 31, 37, .08);
  overflow: hidden;
  border-radius: 0;
}

.scroll {
  max-height: calc(52vh - 120rpx);
  box-sizing: border-box;
  overflow: auto!important;
}

.table {
  width: auto;
}

.theader {
  /* position: sticky; */
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(239, 247, 255);
}

.tbody {
  flex-direction: column;
}

.th, .td {
  min-width: 25%;
  flex-wrap: nowrap;
  text-align: center;
  box-sizing: border-box;
}

.th {
  font-size: 28rpx;
}

.th-item {
  padding: 20rpx 8rpx 16rpx;
  background-color: rgb(239, 247, 255);
}

.td-item {
  padding: 16rpx 8rpx;
  font-size: 26rpx;
}

.tr:nth-child(2n) .td {
  background-color: rgb(255, 249, 244, 1);
}

.tr:nth-child(2n+1) .td {
  background-color: #fff;
}

.tfooter {
  position: sticky;
  width: 100%;
  bottom: -1px;
}

.tfooter .td {
  background-color: rgb(245, 247, 250)!important;
}

.left-view {
  padding-bottom: 30rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

/*暂无数据*/
.noData {
  min-height: 150rpx;
  text-align: center;
  line-height: 150rpx;
  font-size: 28rpx;
  color: #999;
}
.flex {
  display: flex;
  display: -webkit-flex;
}

.font-weight-bold {
  font-weight: bold;
}

.js代码

  labelList: [
      {
        label: '姓名',
        prop: 'username'
      },
      {
        label: '日期',
        prop: 'name'
      },
      {
        label: '成绩',
        prop: 'performance'
      },
      {
        label: '证书',
        prop: 'zhengs'
      }
    ],
    position: 'sticky', // 固定表头
    propList: [
      
    ],  // 列表数据
    summationData: [], // 合计数据
    marqueeProps: {
      loop: true,
      leading: 1000,
      trailing: 800,
      fps: 40,
    },
    index: 0,
    show: false