微信小程序---表格的制作并展示云数据库中的数据

微信小程序并没有表格组件，可能是官方考虑到，在前端开发中，表格的嵌套性太多，用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)
            }
        })
    },

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

实现效果：