實(shí)在是懶得自己封裝了，就在網(wǎng)上找了一下別人封裝好的，這里主要參考的是?灰信網(wǎng)上的一篇文章，我在他的基礎(chǔ)上改了一下樣式，動(dòng)態(tài)生成列表每一列列寬。

表格可左右橫向滑動(dòng)

一、子頁面

table.wxml

<scroll-view class="table-wrap" scroll-x="{{true}}" ><view class="table"><view class="tr"><block wx:for="{{headers}}" wx:key="index"><view class="th left" style="width:{{tableW[index]}}rpx">{{item}}</view></block></view><view class="tr" wx:for="{{list}}" wx:key="index"><block wx:for="{{item}}" wx:key="index"><view class="td left" style="width:{{tableW[index]}}rpx">{{item}}</view></block></view></view> </scroll-view>

table.wxss

.table-wrap{ width: 100%; } .table{background-color: white;border-right:0;border-bottom: 0; } .tr{ display: flex; justify-content: space-between;align-items: center;} .th, .td{flex-shrink: 0; /* 用數(shù)值來收縮比例 默認(rèn)值為1，0不收縮 */padding: 4rpx;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;font-size: 30rpx; line-height: 70rpx; } .th{color: rgba(23, 21, 23, 0.73);background-color: #FFF8ED;} .td{color: #666666;} .tr:first-child .th{border-top:1px solid #dadada;}

table.js?

/**list:表格數(shù)據(jù), headers:表頭名稱數(shù)據(jù),tableW:每一列寬 */ Component({// 組件的屬性列表properties: {list: {type: Array,value: []},headers: {type: Array,value: []},tableW: {type: Array,value: [180, 120,180,180,180,180,140]}} })

?二、父頁面使用

父頁面.json

{"usingComponents": {"mytable":"…/…/components/table/table" }

父頁面.wxml

<!---- 使用默認(rèn)寬度時(shí)，tableW="{{tableW}}"可以省略，js中也不需要tableW這個(gè)參數(shù) ----> <mytable list="{{list}}" headers="{{headers}}" tableW="{{tableW}}"></mytable>

父頁面.js

data: {headers: ["第一", "第二", "第三", "第四", "第五", "第六","第七"], //表格頭部信息list:[[100,100,100,100,100,10,70],[200,200,200,200,200,30,70]], //表格數(shù)據(jù)，每一項(xiàng)表示一行的數(shù)據(jù)tableW: [120, 180,180,180,180,180,140] //每一列寬 }

總結(jié)

以上是生活随笔為你收集整理的小程序 封装table组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。