Here comes the wechat applet form component you were expecting

background

In doing H5 development table is the most common label, such a good label in wechat small program but no, helpless, sigh, despair!!

Running towards the mission of Li Guo Li ape, I *** began to build the wheel road.

function

It is used to display large amounts of structured data.

Support paging, custom operations, long and wide table scrolling and other functions.

implementation

preface

Expose necessary attributes such as table headers and data.
Support for external style control tables.
The list on the mobile phone is light and does not need to be exposed for the time being.

details

Three official descriptions of properties are exposed through properties

Component({properties: {list: {// table datatype: Array, value: []}, headers: {// Headerstype: Array, value: []}, hasBorder: {// table middle bordertype: String,
      value: "no"}, height: {//table heighttype: Number || String,
      value: ' '
    },
    width: {
      type: Number,
      value: 0
    },
    tdWidth: {
      type: Number,
      value: 35
    }
      
  }
})


Copy the code

Support external style official specification via externalClasses

/* Component({externalClasses: [) {/* externalClasses: ['s-class-header'.'s-class-row']})Copy the code

The index. WXML file renders the table dynamically through nested loops


<view class="table table-noborder">
    <view class="tr thead s-class-header">
      <view wx:for="{{headers}}" class="td td-{{hasBorder}}border">{{item.display}}</view>
    
    </view>
    <block wx:for-item='i' wx:for="{{list}}">
      <view class="tr s-class-row">
        <view wx:for-item='j' wx:for="{{headers}}" class="td td-{{hasBorder}}border">{{i[j['text']]}}</view>        
      </view>
    </block>
  </view>

Copy the code

Index. WXSS users can modify the source index. WXSS file for very personal styles


.table {
  border: 1px solid #ccc;
  font-size: 28rpx;
  background: #fff;  
  border-right:none;
}
.table-noborder {
  border-right:1rpx solid #ccc;
}
 
.tr{
  display: flex;
}
 
.td {
  text-align: center;
  border: 1px solid #ccc;
  display: inline-block;  
  border-bottom: none;
  flex: 1;
  padding: 16rpx;  
  border-left: none;
}
.td-noborder{  
  border-right: none;
}
 
.thead .td{
  border-top: none;
  padding: 16rpx;
  font-weight: bold;
}

Copy the code

Quick learning

The.json file imports the component

 {
  "usingComponents": {
    "s-table": "Actual path /table/index"}}Copy the code

The index. WXML file uses components

<s-table hasBorder='no' width='200' tdWidth='100' height='200' s-class-header='my-class' s-class-row='my-class-row' headers='{{headers}}' list='{{row}}'></s-table>

Copy the code

Complete source code and usage instructions see Github

Making the address

More and better components continue to be updated…

About us

The front end team of Kuaigou Taxi focuses on sharing front-end technology and regularly pushes high-quality articles, which are welcome to be praised. This article will be published on our official account, just scan it!

Here comes the wechat applet form component you were expecting