你期待的微信小程序表格组件来啦

在做H5开发中表格table是最常见的标签，如此好用的标签在微信小程序中却没有，无奈，叹息，绝望！！！

奔着利国利猿的使命，我***开始了造轮之路。

实现

前言

• 暴露必要属性例如表头，数据。
• 支持外部样式控制表格。
• 手机端的列表较轻暂时不需要暴露事件。

细节

• 通过properties暴露了三个属性官方说明

Component({
  properties: {
       list: {  // 表格数据
      type: Array,value: []
    },51); font-weight: 700;">headers: {  //表头
      hasBorder: {  // 表格中间边框
      type: String,51); font-weight: 700;">value: "no"
    }
      
  }
})


复制代码

• 通过externalClasses支持外部样式官方说明

/*
s-class-header // 外部定义表头样式

s-class-row  // 外部定义行数据样式

*/


externalClasses: ['s-class-header','s-class-row']
})

复制代码

• index.wxml文件通过嵌套循环动态渲染表格

<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}}">
      <"tr s-class-row">
        <view wx:for-item='j' wx:for={{i[j['text']]}}</view>        
      </view>
    </block>
  </view>

复制代码

• index.wxss 使用者对于很个性的样式可以自行修改源代码index.wxss文件

.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;
  display: inline-block;  
  border-bottom: none;
  flex: 1;
  padding: 16rpx;  
  border-left: none;
}
.td-noborder{  
  border-right: none;
}
 
.thead .td{
  border-top: none;
  16rpx;
  font-weight: bold;
}

复制代码

快速上手

.json文件引入组件

{
  "usingComponents": {
    "s-table": "实际路径/table/index"
  }
}
 
复制代码

index.wxml 文件使用组件

<s-table hasBorder='no' s-class-header='my-class' s-row='my-class-row' headers='{{headers}}' list='{{row}}'></s-table>

复制代码

完整源代码和使用说明见github

github地址

更多更好的组件持续更新中...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!