小程序 封装table组件

实在是懒得自己封装了，就在网上找了一下别人封装好的，这里主要参考的是 灰信网上的一篇文章，我在他的基础上改了一下样式，动态生成列表每一列列宽。

表格可左右横向滑动

一、子页面

table.wxml

<scroll-view class="table-wrap" scroll-x="{{true}}" >
    <view class="table">
      <view class="tr">
        <block wx:for="{{headers}}" wx:key="index">
          <view class="th left" style="width:{{tableW[index]}}rpx">{{item}}</view>
        </block>
      </view>
      <view class="tr" wx:for="{{list}}" wx:key="index">
        <block wx:for="{{item}}" wx:key="index">
          <view class="td left" style="width:{{tableW[index]}}rpx">{{item}}</view>
        </block>
      </view>
    </view>
</scroll-view>

table.wxss

.table-wrap{ width: 100%; }
.table{
  background-color: white;
  border-right:0;
  border-bottom: 0;
}
.tr{ display: flex; justify-content: space-between;align-items: center;}
.th, .td{
  flex-shrink: 0; /* 用数值来收缩比例 默认值为1，0不收缩 */
  padding: 4rpx;
  border-bottom: 1px solid #dadada;
  border-right: 1px solid #dadada;
  text-align: center;
  font-size: 30rpx; 
  line-height: 70rpx; 
}
.th{color: rgba(23, 21, 23, 0.73);background-color: #FFF8ED;}
.td{color: #666666;}
.tr:first-child .th{border-top:1px solid #dadada;}

table.js 

/**list:表格数据, headers:表头名称数据,tableW:每一列宽  */
Component({
  // 组件的属性列表
  properties: {
    list: {
      type: Array,
      value: []
    },
    headers: {
      type: Array,
      value: []
    },
    tableW: {
      type: Array,
      value: [180, 120,180,180,180,180,140]
    }
  }
})

 二、父页面使用

父页面.json

{
  "usingComponents": {
  "mytable":"…/…/components/table/table"
}

父页面.wxml

<!----  使用默认宽度时，tableW="{{tableW}}"可以省略，js中也不需要tableW这个参数 ---->
<mytable list="{{list}}" headers="{{headers}}" tableW="{{tableW}}"></mytable>

父页面.js

data: {
    headers: ["第一", "第二", "第三", "第四", "第五", "第六","第七"],  //表格头部信息
    list:[[100,100,100,100,100,10,70],[200,200,200,200,200,30,70]], //表格数据，每一项表示一行的数据
    tableW: [120, 180,180,180,180,180,140]  //每一列宽
}