小程序表表格自定義組件

1：安裝

npm install --save miniprogram-table-component

2：引用在頁面的 json 配置文件中添加 recycle-view 和 recycle-item 自定義組件的配置

{
  "usingComponents": {
    "table-view": "../../../miniprogram_npm/miniprogram-table-component"
  }
}

3：在wxml 中使用

<table 
    headers="{{tableHeader}}" 
    data="{{ row }}" 
    stripe="{{ stripe }}"
    border="{{ border }}"
/>

4：js中

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    tableHeader: [],
    stripe: true,
    border: true,
    outBorder: true,
    row: [],
    msg: '暫無數據'
  },

  /** 
   * 點擊表格一行
   */
  onRowClick: function(e) {
    console.log('e: ', e)
  }
})

5：相關table配置

<table  
      header-row-class-name="header-class"
      row-class-name="row-class"
      cell-class-name="cell-class"
      headers="{{tableHeader}}" 
      data="{{ row }}" 
      stripe="{{ stripe }}"
      height="{{ height }}"
      border="{{ border }}"
      bind:rowClick="onRowClick"
      bind:cellClick="onCellClick" 
      no-data-msg="{{ msg }}"
/>