Case diagram:

Table made into a component, the need for children’s shoe code bake past directly used.

1:table.wxml

<view class="table"> <view class="thead"> <view wx:for="{{thead}}" wx:key="index"> <view class="th" style="width:{{item.width? item.width+'rpx':''}}">{{item.title}}</view> </view> </view> <view class="tbody"> <block wx:for="{{dataSources}}" wx:for-index="indexTr" wx:key="indexTr"> <view class="tr"> <view class="td" wx:for="{{thead}}" wx:for-item="itemTh" wx:for-index="indexTh" wx:key="indexTh"> <view class="td-text" style="width:{{itemTh.width? itemTh.width+'rpx':''}}"> {{itemTh.key=='index'? (indexTr+1):item[itemTh.key]}} </view> </view> </view> </block> <block wx:if="{{dataSources.length===0}}"> <view Class = "data - no" > temporarily no data < / view > < block > < view > < / view >Copy the code

2: table. WXSS

.thead,.tr{ display: flex; align-items: center; text-align: center; justify-content: space-between; } .thead{ height: 60rpx; background: #F4F4F4; border-radius: 4rpx } .th,.td{ font-size: 20rpx; } .th,.td,.td-text{ height: 60rpx; line-height: 60rpx; } .th{ background: #F4F4F4; }.td{color: rgba(0, 0, 0, 0.8); border-bottom: 1rpx solid #EEEEEE; flex: auto; } .td-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .data-no{ text-align: center; line-height: 200rpx; }Copy the code

3:table.json

{
  "component":true,
  "usingComponents": {}
}
Copy the code

4:table.js

Component({properties:{thead:{type:Array, value:[], /* Format thead:[{title: ", // display header name key: ", / / corresponding list field width: "/ / width * /}}], dataSources: {type: Array, value: [], / * * / request data}}, data:, the methods: {}, {}})Copy the code

5: Component reference methods are added to the parent component’s. Json file

"usingComponents": { "table":".. //table /components/table "//table component relative pathCopy the code

To the.wxml of the parent component

      <table thead="{{thead}}" dataSources="{{dataSources}}"></table>
Copy the code

To the parent component’s.js data

Data: {thead: [], / * header data such as thead: [{title: 'serial number, key:' index, width: '66'}] * / dataSources: [], / / interface data}Copy the code