钉钉小程序 - 实现简易表格

导语：自定义钉钉小程序table组件。(flex布局实现)

一、table组件

1.table.axml

<view class="wrap">
  <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"
          >
            <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>

<!-- 向左滑动查看 -->
<view class="left-view" a:if="{{labelList.length > 4}}">—— 向左滑动查看 ——</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

2.table.acss

.wrap {
  margin: 30rpx 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

3.table.js

Component({
  mixins: [],
  data: {},
  props: {
    labelList: [], // 定义表头的数据
    propList:[], // 定义列数据
    summationData: [], // 数据合计
    position: 'sticky', // 固定表头
  },
  didMount() {
  },
  didUpdate() {},
  didUnmount() {},
  methods: {},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、组件应用

1.index.axml

<view>
  <table labelList="{{labelList}}" propList="{{propList}}" summationData="{{summationData}}" />
</view>
1
2
3

2.index.js

import { getTickeQuotaTable } from '/src/api/api' // 接口

Page({
  data: {
  	// 定义表头数据及列字段
    labelList: [
      {
        label: '名称',
        prop: 'name'
      },
      {
        label: '数量',
        prop: 'count'
      },
      {
        label: '比例',
        prop: 'ratio'
      }
    ],
    propList: [],  // 列表数据
    summationData: [], // 合计数据
  },

  onLoad() {
    this.getTickeQuotaTable()
  },

  /**
   * @description 获取列表数据
   * @param {number} type 筛选类型
   */
  async getTickeQuotaTable(type = 0) {
    try {
      dd.showLoading({ content: '加载中...' })
      const res = await getTickeQuotaTable({ type })
      if (res.data.code === 200) {
        dd.hideLoading()
        const propList = res.data.data.list
        let rate = 0
        for (let i = 0; i < propList.length; i++) {
          rate += +propList[i].ratio.split('%')[0] // 计算百分比
        }
        // 结果四舍五入
        rate = `${Math.round(rate)}%`
        // 设置合计数据
        const summationData = ['合计', res.data.data.total, rate]
        this.setData({
          propList,
          summationData,
        })
      } else {
        dd.hideLoading()
        dd.alert({
          content: res.data.msg,
          buttonText: '我知道了',
        })
      }
    } catch (error) {
      console.log(error)
    }
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

三、最终效果

1.三列数据

2.四列数据（在手机上最多可以完整显示四列）

5.12备注：样式表中，有些公用class忘了添加，补充样式如下：

.flex {
  display: flex;
  display: -webkit-flex;
}

.font-weight-bold {
  font-weight: bold;
}
1
2
3
4
5
6
7
8