微信小程序并没有表格组件，可能是官方考虑到，在前端开发中，表格的嵌套性太多，用DIV代码会比较简洁就没有实现吧。没有现成的组件可以使用，针对这个问题，目前有两种解决方案：

1）内嵌 h5页面，（毕竟 h5 的 table组件 众多，但是各个参数都需要配置，比较麻烦）

2）自定义 table组件（其实更方便）

使用wx:for列表渲染功能结合flex布局，即可实现表格的制作

一、表格的制作

table.wxml:

<!--pages/table/table.wxml--><view class="table"><view class="tr bg-w"><view class="th">姓名</view><view class="th">报到方式</view><view class="th ">到校日期</view></view><block wx:for="{{listData}}" wx:key="{[code]}"><view class="tr" wx:if="{{index % 2 == 0}}"><view class="td">{{item.name}}</view><view class="td">{{item.style}}</view><view class="td">{{item.datetime}}</view></view><view class="tr" wx:else><view class="td">{{item.name}}</view><view class="td">{{item.style}}</view><view class="td">{{item.datetime}}</view></view></block></view>

在列表循环中把每个数据在每行依次排列即得到表格的排列模式，这里的index%2==0意为相邻两行的样式不一样，这里都用tr类使两行样式一样，实际可以更改为不同样式。

tr类中用flex布局展示这一行的所有数据，即构成表格，表头用bg-w类做一个区分即可

table.wxss:

/* pages/table/table.wxss */.table {    border: 0px solid darkgray;    font-size: 12px;    } .tr {    display: flex;    width: 100%;    justify-content: center;    height: 2rem;    align-items: center; } .td {    width:40%;    justify-content: center;    text-align: center;}.bg-w{    background: snow; }  .th {    width: 40%;    justify-content: center;    background: #3366FF;    color: #fff;    display: flex;    height: 2rem;    align-items: center;}

二、展示云数据库中的数据

要想实现从云数据库读取数据到界面展示，需要把数据读到界面内存中，在js中定义内存数组为

 data: {

        listData: [] 

    },

因此只需读数据到此数组即可，参考云数据库的操作接口，在tab切换时需要读数据库，因此用onshow函数来读入数据，代码如下：

onShow() {        wx.cloud.database().collection('students').get({            success: res=>{              console.log('请求成功',res)//res.data包含该记录的数据              this.setData({                listData: res.data              })            },            fail(err){              console.log('请求失败',err)            }        })    },

以上即为数据库与表格展示的绑定，非常方便简洁。

实现效果：