微信小程序 table表格 PC版本

公司项目啊....其实小程序页面的商品列表也有宫格、列表、大图模式了，尽管描述得不那么详细，但是信息量也能看到个大概，但是领导或业务员比较喜欢看表格详细点，罗列得比较清晰。所以要求可以通过小程序分享到微信，PC端登录微信，在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~

实现：表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等...

先上效果图（mock数据）

小程序是没有原生 table tr th td 这些标签的，但是可以通过css 样式控制

v-for 循环换成 wx:for wx:key 就行原理都是一样的~

html 结构

<view class='container'><view class='table'><view class='table_thead'><view class="th" style='width: 5%;'>序号</view><view class='th'>图片</view><view class='th'>型号</view><view class='th'>颜色</view><view class='th'>色号</view><view class='th'>规格</view><view class='th'>尺寸</view><view class='th'>件数</view><view class='th'>价格</view><view class='th'>备注</view></view><view class='table_tbody'><view class='td' style='width: 5%;'>11</view><view class="td"><image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image></view><view class="td">C01床</view><view class="td">棕色</view><view class="td">康高：AF-2721</view><view class='td'><view class="table_Text_class">舒适版</view></view><view class='td'><view class="table_Text_class">1500*2000*10*7</view></view><view class='td'><view class="table_Text_class">普通3件 气动9件</view></view><view class='td'><view class="table_Text_class">2389</view></view><view class='td'>备注备注备注备注备注备注备注备注备注备注备注备注</view></view><view class='table_tbody'><view class='td' style='width: 5%;'>22</view><view class="td"><image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image></view><view class="td">C01床</view><view class="td">棕色</view><view class="td">康高：AF-2721</view><view class='td'><view class="table_Text_class">舒适版</view><view class="table_Text_class">舒适版</view></view><view class='td'><view class="table_Text_class">1500*2000*10*8</view><view class="table_Text_class">1500*2000*10*8</view></view><view class='td'><view class="table_Text_class">普通3件 气动8件</view><view class="table_Text_class">普通3件 气动8件</view></view><view class='td'><view class="table_Text_class">23855</view><view class="table_Text_class">23855</view></view><view class='td'>备注备注备注备注备注备注备注备注备注备注备注备注</view></view><view class='table_tbody'><view class='td' style='width: 5%;'>333</view><view class="td"><image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image></view><view class="td">C01床</view><view class="td">棕色</view><view class="td">康高：AF-2721</view><view class='td'><block v-for="inds1 of num" :key="inds1"><view class="table_Text_class">舒适版</view></block></view><view class='td'><block v-for="inds2 of num" :key="inds2"><view class="table_Text_class">1500*2000*10*12</view></block></view><view class='td'><block v-for="inds3 of num" :key="inds3"><view class="table_Text_class">普通3件 气动3件</view></block></view><view class='td'><block v-for="inds4 of num" :key="inds4"><view class="table_Text_class">2384</view></block></view><view class='td'>备注备注备注备注备注备注备注备注备注备注备注备注</view></view><view class='table_tbody'><view class='td' style='width: 5%;'>测试</view><view class="td"><image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image></view><view class="td">C01床</view><view class="td">棕色</view><view class="td">康高：AF-2721</view><view class='td'><view class="table_Text_class">舒适版</view><view class="table_Text_class">旗舰版</view></view><view class='td'><view class="table_Text_class">1500*2000*10*111111</view><view class="table_Text_class">1500*2000*10*222222</view><view class="table_Text_class">1500*2000*10*333333</view><view class="table_Text_class">1500*2000*10*444444</view></view><view class='td'><view class="table_Text_class">3</view><view class="table_Text_class">普通3件 气动5件</view><view class="table_Text_class">3</view><view class="table_Text_class">3</view></view><view class='td'><view class="table_Text_class">2381</view><view class="table_Text_class">2382</view><view class="table_Text_class">2383</view><view class="table_Text_class">2384</view></view><view class='td'>纳帕皮保用十年 头层真皮 舒适版加800元 旗舰版加1000元 高箱床加300元</view></view><view class='table_tbody'><view class='td' style='width: 5%;'>333</view><view class="td"><image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image></view><view class="td">C01床</view><view class="td">棕色</view><view class="td">康高：AF-2721</view><view class='td'><block v-for="inds1 of 3" :key="inds1"><view class="table_Text_class">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试商品商品商品</view></block></view><view class='td'><block v-for="inds2 of 3" :key="inds2"><view class="table_Text_class">1500*2000*10*10</view></block></view><view class='td'><block v-for="inds3 of 3" :key="inds3"><view class="table_Text_class">普通3件 气动3件</view></block></view><view class='td'><block v-for="inds4 of 3" :key="inds4"><view class="table_Text_class">2381</view></block></view><view class='td'>备注备注备注备注备注备注备注备注备注备注备注备注</view></view><block v-for="index of 12" :key="index"><view class='table_tbody'><view class='td' style='width: 5%;'>{{index}}</view><view class="td"><image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image></view><view class="td">C01床</view><view class="td">棕色</view><view class="td">康高：AF-2721</view><view class='td'><block v-for="inds1 of 3" :key="inds1"><view class="table_Text_class">舒适版</view></block></view><view class='td'><block v-for="inds2 of 3" :key="inds2"><view class="table_Text_class">1500*2000*10*5</view></block></view><view class='td'><block v-for="inds3 of 3" :key="inds3"><view class="table_Text_class">普通3件 气动3件</view></block></view><view class='td'><block v-for="inds4 of 3" :key="inds4"><view class="table_Text_class">2384</view></block></view><view class='td'>备注备注备注备注备注备注备注备注备注备注备注备注</view></view></block></view></view>

css 样式

page {width: 100%;white-space: nowrap;overflow: scroll;}.container {width: 100%;height: 100%;display: flex;background-color: white;}.table {width: 100%;display: inline-flex;flex-direction: column;border: 1rpx solid rgba(218, 217, 217, 1);border-bottom: 0;}.table_thead {width: 100%;height: 40px;border-top: 1rpx solid rgba(218, 217, 217, 1);border-bottom: 1rpx solid rgba(218, 217, 217, 1);display: inline-flex;position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: -o-sticky;position: sticky;top: 0;z-index: 99;}.th,.td {width: 10.555%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #FFFF00;border-right: 1rpx solid rgba(218, 217, 217, 1);border-bottom: 1rpx solid rgba(218, 217, 217, 1);border-width: thin;font-size: 30rpx;font-weight: bold;}.table_tbody {width: 100%;display: inline-flex;flex-direction: row;border-bottom: 1px solid rgba(218, 217, 217, 1);}.td {background: white;min-height: 60px;font-weight: normal;text-align: center;word-wrap: break-word;word-break: break-all;white-space: pre-line;}.table_Text_class {width: 100%;min-height: 40px;display: flex;justify-content: center;align-items: center;text-align: center;flex-basis: auto;flex-grow: 1;-webkit-flex-grow: 1;word-wrap: break-word;word-break: break-all;white-space: pre-line;border-bottom: 1rpx solid rgba(218, 217, 217, 1);border-width: thin;}.table_Text_class:last-child {border-bottom: none;}

以上是微信小程序table表格随着浏览器窗口大小自适应改变大小，如果不想自适应，屏幕小出现滚动条可以左右滑动的情况，屏幕大的时候表格内容居中显示，两边留白。那么列的宽度就不要写百分比%，直接写数值。先看效果图

html 结构

<view class='container'><view class='table'><view class='table_thead'><view class="th" style='width:70px;'>序号</view><view class='th'>图片</view><view class='th' style='width:100px;'>型号</view><view class='th' style='width:100px;'>颜色</view><view class='th'>色号</view><view class='th'>规格</view><view class='th'>尺寸</view><view class='th' style='width:100px;'>件数</view><view class='th' style='width:100px;'>价格</view><view class='th'>备注</view></view><block wx:for="{{list}}" wx:key="index"><view class='table_tbody'><view class='td' style='width:70px;'>{{index+1}}</view><view class="td"><image src="{{item.image}}" mode="aspectFit" bindtap="imgClick" data-index="{{index}}" lazy-load style="width: 100%;height: 80%;"></image></view><view class="td" style='width:100px;'>{{item.param_model}}</view><view class="td" style='width:100px;'>{{item.param_color}}</view><view class="td">{{item.param_color_num}}</view><view class='td'><block wx:for="{{item.param_sku}}" wx:for-item="u" wx:key="u"><view class="table_Text_class">{{u.sku}}</view></block></view><view class='td'><block wx:for="{{item.param_sku}}" wx:for-item="e" wx:key="e"><view class="table_Text_class">{{e.size}}</view></block></view><view class='td' style='width:100px;'><block wx:for="{{item.param_sku}}" wx:for-item="m" wx:key="m"><view class="table_Text_class">{{m.num}}</view></block></view><view class='td' style='width:100px;'><block wx:for="{{item.param_sku}}" wx:for-item="e" wx:key="e"><view class="table_Text_class">{{e.price}}</view></block></view><view class='td'>{{item.param_custom_remark == null?"":item.param_custom_remark}}</view></view></block></view>
</view>

css 样式

page {width: 100%;white-space: nowrap;box-sizing: border-box;overflow: scroll;
}.container {width: 100%;height: 100%;display: flex;background-color: white;
}.table {margin: 0 auto;display: inline-flex;flex-direction: column;border: 1rpx solid rgba(218, 217, 217, 1);border-bottom: 0;
}.table_thead {width: 100%;height: 40px;border-top: 1rpx solid rgba(218, 217, 217, 1);display: inline-flex;position: -webkit-sticky;position: sticky;top: 0;z-index: 99;
}.th,
.td {width: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #FFFF00;border-right: 1rpx solid rgba(218, 217, 217, 1);border-bottom: 1rpx solid rgba(218, 217, 217, 1);border-width: thin;font-size: 14px;font-weight: bold;
}.table_tbody {width: 100%;display: inline-flex;flex-direction: row;border-bottom: 1px solid rgba(218, 217, 217, 1);
}.td {background: white;min-height: 60px;font-weight: normal;text-align: center;word-wrap: break-word;word-break: break-all;white-space: pre-line;
}.table_Text_class {width: 100%;min-height: 40px;display: flex;justify-content: center;align-items: center;text-align: center;flex-basis: auto;/* flex-basis: 0; */flex-grow: 1;-webkit-flex-grow: 1;word-wrap: break-word;word-break: break-all;white-space: pre-line;border-bottom: 1rpx solid rgba(218, 217, 217, 1);border-width: thin;
}.table_Text_class:last-child {border-bottom: none;
}

如果表格每一列的数据比较简短，那么以上这两种方式都可以满足需求了，但是如果列的内容里面还有行，并且行里面的文字还长，超出了列的宽度文字自动换行后导致高度撑开，高度和边框线对不齐的情况，可以根据需求改下结构和样式。先上效果图！

html 结构

<view class='container'><view class='table'><view class='table_thead'><view class="th" style='width:70px;'>序号</view><view class='th'>图片</view><view class='th' style='width:100px;'>型号</view><view class='th' style='width:100px;'>颜色</view><view class='th'>色号</view><view class='th'>规格</view><view class='th'>尺寸</view><view class='th' style='width:100px;'>件数</view><view class='th' style='width:100px;'>价格</view><view class='th'>备注</view></view><view class='table_tbody'><view class='td' style='width:70px;font-weight: bold;'>测试</view><view class="td" style="padding: 10px 0px;"><image src="/static/logo.png" mode="scaleToFill"style="width: 150px;height: 150px;margin: auto;"></image></view><view class="td" style='width:100px;'>C01床</view><view class="td" style='width:100px;'>棕色</view><view class="td">康高：AF- 2721</view><view class="td max_td"><view class="max_td_row"><view class="max_td_row_item">舒适版</view><view class="max_td_row_item">1700*2180*1200</view><view class="max_td_row_item" style="width: 100px;">普通3件</view><view class="max_td_row_item" style="width: 99.5px;">2380</view></view></view><view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view></view><view class='table_tbody'><view class='td' style='width:70px;font-weight: bold;'>测试</view><view class="td" style="padding: 10px 0px;"><image src="/static/logo.png" mode="scaleToFill"style="width: 150px;height: 150px;margin: auto;"></image></view><view class="td" style='width:100px;'>C01床</view><view class="td" style='width:100px;'>棕色</view><view class="td">康高：AF- 2721</view><view class="td max_td"><view v-for="index2 of 2" :key="index2" class="max_td_row"><view class="max_td_row_item">舒适版</view><view class="max_td_row_item">1700*2180*1200</view><view class="max_td_row_item" style="width: 100px;">普通3件</view><view class="max_td_row_item" style="width: 99.5px;">2380</view></view></view><view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view></view><view class='table_tbody'><view class='td' style='width:70px;font-weight: bold;'>测试</view><view class="td" style="padding: 10px 0px;"><image src="/static/logo.png" mode="scaleToFill"style="width: 150px;height: 150px;margin: auto;"></image></view><view class="td" style='width:100px;'>C01床</view><view class="td" style='width:100px;'>棕色</view><view class="td">康高：AF- 2721</view><view class="td max_td"><view v-for="index2 of 3" :key="index2" class="max_td_row"><view class="max_td_row_item">舒适版</view><view class="max_td_row_item">1700*2180*1200</view><view class="max_td_row_item" style="width: 100px;">普通3件</view><view class="max_td_row_item" style="width: 99.5px;">2380</view></view></view><view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view></view><block v-for="index of 3" :key="index"><view class='table_tbody'><view class='td' style='width:70px;font-weight: bold;'>{{index}}</view><view class="td" style="padding: 10px 0px;"><image src="/static/logo.png" mode="scaleToFill"style="width: 150px;height: 150px;margin: auto;"></image></view><view class="td" style='width:100px;'>C01床</view><view class="td" style='width:100px;'>棕色</view><view class="td">康高：AF- 2721</view><view class="td max_td"><view class="max_td_row"><view class="max_td_row_item">舒适版</view><view class="max_td_row_item">1700*2180*1200</view><view class="max_td_row_item" style="width: 100px;">普通3件 气动5件 ---测试测试测试</view><view class="max_td_row_item" style="width: 99.5px;">2380</view></view><view v-for="index2 of 3" :key="index2" class="max_td_row"><view class="max_td_row_item">舒适版{{index2}}</view><view class="max_td_row_item">1700*2180*1200</view><view class="max_td_row_item" style="width: 100px;">3</view><view class="max_td_row_item" style="width: 99.5px;">2380</view></view></view><view class='td'>每一行的高度都是不固定的，由内容撑开，每一列 td 默认高度为90px，图片为固定150px高度，当td 高度大于图片高度时图片居中显示，文字过长自动换行内容撑开高度，左右两边的单元格高度也能保持一致</view></view></block></view></view>

css 样式

 page {width: 100%;white-space: nowrap;box-sizing: border-box;overflow: scroll;}.container {width: 100%;height: 100%;display: flex;background-color: white;}.table {margin: 0 auto;display: inline-flex;flex-direction: column;border: 1px solid rgba(218, 217, 217, 1);border-bottom: 0;}.table_thead {width: 100%;height: 40px;border-top: 1px solid rgba(218, 217, 217, 1);border-width: thin;display: inline-flex;position: -webkit-sticky;position: sticky;top: 0;z-index: 99;}.th,.td {width: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #FFFF00;border-right: 1px solid rgba(218, 217, 217, 1);border-bottom: 1px solid rgba(218, 217, 217, 1);border-width: thin;font-size: 14px;font-weight: bold;}.table_tbody {width: 100%;display: inline-flex;flex-direction: row;border-bottom: 1px solid rgba(218, 217, 217, 1);}.td {background: white;min-height: 90px;font-weight: normal;text-align: center;word-wrap: break-word;word-break: break-all;white-space: pre-line;}.max_td {width: 600px;}.max_td_row {width: 100%;display: flex;border-bottom: 1px solid rgba(218, 217, 217, 1);flex-basis: auto;flex-grow: 1;-webkit-flex-grow: 1;}.max_td_row:last-child {border-bottom: none;}.max_td_row_item {width: 200.5px;border-right: 1px solid rgba(218, 217, 217, 1);border-width: thin;min-height: 30px;display: flex;justify-content: center;align-items: center;text-align: center;}.max_td_row_item:last-child {border-right: none;}

js 就不贴了~

我还有一篇文章是微信小程序 table 表格，可以固定表头和表格首列右侧表格可以左右滚动，（多种表格示例）有兴趣可以去看看 https://blog.csdn.net/m0_61073617/article/details/124430213

微信小程序 table表格 PC版本相关推荐

微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
微信小程序table表格自定义组件实现
效果 1. 左图是多列并且给了最大高度的效果. 2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果. 3. 在不为某列设置固定宽度的情况下,四列及四列以下均是平分屏 ...
微信小程序table表格-隔行换色
wxml <view class="table"> <view class="tableTr"><view class=" ...
小程序微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码参数内容 ...
微信小程序开发手册离线版本-下载
微信小程序微信官方日前发布了关于小程序的帮助手册,起地址为: https://mp.weixin.qq.com/debug/wxadoc/dev/ 如果需要最新离线版,可以打开 https://we ...
uniapp 微信小程序开发解决旧版本缓存
1.uniapp 微信小程序如何解决旧版本缓存问题在小程序发布新版本后,小程序端是异步更新,新版本覆盖较慢.如果用户之前已经打开过小程序,通过热启动再进入小程序时,可能访问的还是旧版本,需要一段 ...
微信小程序0.11.122100版本新功能解析
微信小程序0.11.122100版本新功能解析我的知乎专栏-小楼昨夜又秋风 https://zhuanlan.zhihu.com/oldtimes 新版本就不再吐槽了,整的自己跟个愤青似的.人老了, ...
微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的第一步首先你要有一个构建npm的项目还不知道构建npm的小伙 ...
微信小程序的表格table
今天开发微信小程序,在微信小程序的开发文档中,找组件,发现没有table组件.当时我的那个心情呀,各种不爽.于是,我打算自己写几个<text></text>来代替表格吧.然后就 ...

微信小程序 table表格 PC版本

微信小程序 table表格 PC版本相关推荐

最新文章

热门文章