背景
在做H5开发中表格table是最常见的标签，如此好用的标签在微信小程序中却没有，无奈，叹息，绝望！！！
奔着利国利猿的使命，我*开始了造轮之路。
功能
主要用于展示大量结构化数据。
支持分页，自定义操作，长表格宽表格滚动等功能。
实现
前言
- 暴露必要属性例如表头，数据。
- 支持外部样式控制表格。
- 手机端的列表较轻暂时不需要暴露事件。
细节
- 通过properties暴露了三个属性
官方说明
Component({ properties: { list: { // 表格数据 type: Array, value: [] }, headers: { //表头 type: Array, value: [] }, hasBorder: { // 表格中间边框 type: String, value: "no" }, height: { //table的高度 type: Number || String, value: '' }, width: { type: Number, value: 0 }, tdWidth: { type: Number, value: 35 } }})- 通过externalClasses支持外部样式
官方说明
/*s-class-header // 外部定义表头样式s-class-row // 外部定义行数据样式*/Component({ 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}}"> <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>- 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; 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;}#### 快速上手
.json文件引入组件
{ "usingComponents": { "s-table": "实际路径/table/index" }} index.wxml 文件使用组件
<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>完整源代码和使用说明见github
github地址