河南省建设厅村镇建设处网站/百度图片识别搜索引擎

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

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

实现效果：