本文主要是介绍微信小程序开发之——制作表格,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一 概述
表格样式一 | 表格样式二 |
---|
![](/upload/202111/11/202111111439497168.png) | ![](/upload/202111/11/202111111439503474.png) |
二 绘制过程
- 外层设置
display:table
,并设置border-collapse
表格边框模型 - 表头设置
display:table-row
,单元格设置为display:table-cell
- 每一行单元格同表头设置
三 示例代码
3.1 table.wxml(布局文件)
<view class="su-table-box">
<view class="su-table">
<!-- 表格标题 -->
<view class="su-tr">
<view class="su-th" wx:for="{{list.th}}" wx:key="index">{{item}}</view>
</view>
<!-- 表格内容 -->
<view class="su-tr" wx:for="{{list.td}}" wx:for-item="tdinfo" wx:key="index">
<view class="su-td" wx:for="{{tdinfo}}" wx:key="index_">{{item}}</view>
</view>
</view>
</view>
3.2 table.wxss(样式文件)
.su-table-box {
height: 100%;
overflow-x: auto;
padding-bottom: 40rpx;
}
.su-table {
margin: 0 auto;
display: table;
border-collapse: collapse;
overflow-x: auto;
word-break: keep-all;
white-space: nowrap;
background-color: #FFFFFF;
width: 90%;
border-radius: 20rpx;
}
.su-tr {
display: table-row;
}
.su-th {
display: table-cell;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border: 1rpx solid #DDDDDD;
border-right: none;
border-bottom: none;
background-color: #87CEFA;
color: #FFFFFF;
}
.su-td {
padding: 0rpx 30rpx;
display: table-cell;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border: 1rpx solid #DDDDDD;
border-right: none;
}
3.3 table.js(设置表格展示数据)
onLoad: function (options) {
const list = {
// 表格标题
th: ["时间", "得分"],
// 表格内容 这里只能使用 数组套数组格式
td: [
[
"2021-11-03 13:36",
"10"
],
[
"2021-11-02 10:28",
"9"
],
[
"2021-11-01 08:30",
"8"
],
[
"2021-10-31 07:30",
"7"
],
],
}
this.setData({
list
})
},
四 参考代码
这篇关于微信小程序开发之——制作表格的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!