[移动开发]小程序table，自定义组件

小程序table，自定义组件。
关注小编不定时分享更多精彩内容。
例图：

table做成一个组件，需要的童鞋代码烤过去直接用。
1:table.wxml

<view class="table">
  <view class="thead">
    <view wx:for="{{thead}}" wx:key="index">
      <view class="th" style="width:{{item.width?item.width+'rpx':''}}">{{item.title}}</view>
    </view>
  </view>
  <view class="tbody">
    <block wx:for="{{dataSources}}" wx:for-index="indexTr" wx:key="indexTr">
      <view class="tr">
        <view class="td" wx:for="{{thead}}" wx:for-item="itemTh" wx:for-index="indexTh" wx:key="indexTh">
          <view class="td-text" style="width:{{itemTh.width?itemTh.width+'rpx':''}}">
            {{itemTh.key=='index'?(indexTr+1):item[itemTh.key]}}
          </view>
        </view>
      </view>
    </block>
    <block wx:if="{{dataSources.length===0}}">
      <view class="data-no" >
        暂无数据
      </view>
    </block>
  </view>
</view>

2：table.wxss

.thead,.tr{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-between;
}
.thead{
  height: 60rpx;
  background: #F4F4F4;
  border-radius: 4rpx
}

.th,.td{
  font-size: 20rpx;
}
.th,.td,.td-text{
  height: 60rpx;
  line-height: 60rpx;
}
.th{
  background: #F4F4F4;
}
.td{
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1rpx solid #EEEEEE;
  flex: auto;
}
.td-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.data-no{
  text-align: center;
  line-height: 200rpx;
}

3:table.json

{
  "component":true,
  "usingComponents": {}
}

4:table.js

Component({
  properties:{
    thead:{
      type:Array,
      value:[],
      /*
      格式
       thead:[{
          title:'', //显示表头名字
          key:'', // 对应列表字段
          width:'' //宽度
        }]
      */
    },
    dataSources:{
      type:Array,
      value:[],
       /*
       请求数据
      */
    }
  },
  data: {
   
  },
  methods:{

  },
})

5:组件的引用方法
在父组件的.json中加入

"usingComponents": {
    "table":"../components/table/table" //table组件的相对路径，找自己存的文件路径
  }

父组件的.wxml中加入

      <table thead="{{thead}}" dataSources="{{dataSources}}"></table>

父组件的.js的data中加入

data: {
  thead:[],
 /* 表头数据例如   thead:[{
      title:'序号',
      key:'index',
      width:'66'
    }] */
 dataSources:[], //接口数据
 }