【春哥博客小程序开发教程分享】在做H5开发中表格table是最常见的标签,这类标签非常好用,但是做小程序开发的都知道,在微信小程序中却没有这些标签、组件。下面春哥技术团队大东,给大家分享下微信小程序表格组件。
实现
前言
- 暴露必要属性,如表头,数据。
- 支持外部样式控制表格。
- 手机端的列表较轻暂时不需要暴露事件。
细节
- 通过properties暴露了三个属性官方说明
Component({
properties: {
list: { // 表格数据
type: Array,
value: []
},
headers: { //表头
type: Array,
value: []
},
hasBorder: { // 表格中间边框
type: String,
value: "no"
}
}
})
复制代码
- 通过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' s-class-header='my-class' s-class-row='my-class-row' headers='{{headers}}' list='{{row}}'></s-table>
复制代码