小程序table，自定义组件

例图：

image.png

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

  
    
      {{item.title}}
    
  
  
    
      
        
          
            {{itemTh.key=='index'?(indexTr+1):item[itemTh.key]}}
          
        
      
    
    
      
        暂无数据
      
    
  

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中加入

父组件的.js的data中加入

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