功能
主要用于展示大量结构化数据。
支持分页、自定义操作、长，宽表格滚动等功能。
实现
前言
- 暴露必要属性例如表头，数据。
- 支持外部样式控制表格。
- 手机端的列表较轻暂时不需要暴露事件。
细节
- 通过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>
