微信（钉钉）小程序上实现 表格

微信小程序不支持 table 标签，在网上找到一个使用 flex 来实现表格的简明例子，记录一下。

table.wxml

1. <view class="table">

2. <view class="tr bg-w">

3. <view class="th">head1</view>

4. <view class="th">head2</view>

5. <view class="th ">head3</view>

6. </view>

7. <block wx:for="{{listData}}" wx:key="{{code}}">

8. <view class="tr bg-g" wx:if="{{index % 2 == 0}}">

9. <view class="td">{{item.code}}</view>

10. <view class="td">{{item.text}}</view>

11. <view class="td">{{item.type}}</view>

12. </view>

13. <view class="tr" wx:else>

14. <view class="td">{{item.code}}</view>

15. <view class="td">{{item.text}}</view>

16. <view class="td">{{item.type}}</view>

17. </view>

18. </block>

19. </view>

table.wxss

1. .table {

2. border: 0px solid darkgray;

3. }

4. .tr {

5. display: flex;

6. width: 100%;

7. justify-content: center;

8. height: 3rem;

9. align-items: center;

10. }

11. .td {

12. width:40%;

13. justify-content: center;

14. text-align: center;

15. }

16. .bg-w{

17. background: snow;

18. }

19. .bg-g{

20. background: #E6F3F9;

21. }

22. .th {

23. width: 40%;

24. justify-content: center;

25. background: #3366FF;

26. color: #fff;

27. display: flex;

28. height: 3rem;

29. align-items: center;

30. }

table.js

1. Page({

2. data: {

3. listData:[

4. {"code":"01","text":"text1","type":"type1"},

5. {"code":"02","text":"text2","type":"type2"},

6. {"code":"03","text":"text3","type":"type3"},

7. {"code":"04","text":"text4","type":"type4"},

8. {"code":"05","text":"text5","type":"type5"},

9. {"code":"06","text":"text6","type":"type6"},

10. {"code":"07","text":"text7","type":"type7"}

11. ]

12. },

13. onLoad: function () {

14. console.log('onLoad')

15. }

16. })

效果图

钉钉小程序制作表格：  把wx改成a就可以了