用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2019-10-17 00:32

背景在做H5开发中表格table是最常见的标签,如此好用的标签在微信小程序中却没有,无奈,叹息,绝望!!!奔着利国利猿的使命,我*开始了造轮之路。功能主要用于展示大量结构化数据。支持分?#24120;?#33258;定义操作,长表格宽 ...

wechatbg.jpeg

背景

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

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

功能

主要用于展示大量结构化数据。

支持分?#24120;?#33258;定义操作,长表格宽表格滚动等功能。

实现

前言

  • 暴露必要属性例如表头,数据。
  • 支持外部样式控制表格。
  • ?#21482;?#31471;的列表较轻暂时不需要暴露事件。

细节

  • 通过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 使用者对于很个性的样式可以自行修改?#21019;?#30721;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": "?#23548;?#36335;径/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>

完整?#21019;?#30721;和使?#30431;?#26126;见github

github地址

更多更好的组件?#20013;?#26356;新中...

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: s249359986 来自: segmentfault
不朽的浪漫援彩金
浙江十一选五走势图 德国gmp赚钱 七星彩走势图大全 夏天卖什么玩具赚钱 北京赛车pk10网站 组三分析 快彩乐老11选5走势图 2017年网络最赚钱的项目 极速11选5官网 腾讯分分彩跟qq分分彩有什么区别 软件上的漫画怎么赚钱 湖北11选5网上卖吗 福彩组六六码购买技巧 金沙棋牌官方 浙江号码 做ipo很赚钱么