小白教程-微信小程序自定义表格组件

微信小程序自定义表格组件是开发者经常在制作小程序时经常用到组件，但微信小程序没有提供表格组件，针对如何方便的使用自定义表格组件，下面昭旭科技就展开来讲一讲。

自定义的 table 组件，使用很简单，就是按照npm包和微信自定义组件的方法使用。

1、安装和引入

安装组件：

npm install --save miniprogram-table-component

复制代码

引入table自定义组件

在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置

{

  "usingComponents": {

    "table-view": "../../../miniprogram_npm/miniprogram-table-component"

  }

}

复制代码

注意：npm包的路径。如果这里遇到找不到包的问题，可以查看下方的 微信小程序 npm 找到不到npm包的坑？

2、使用table组件

在wxml页面需要用到的地方使用，如下：

<table

    headers="{{tableHeader}}"

    data="{{ row }}"

    stripe="{{ stripe }}"

    border="{{ border }}"

/>

复制代码

在js页面需要用到的地方使用，如下：

Page({

  /**

   * 页面的初始数据

   */

  data: {

    tableHeader: [

      {

        prop: 'datetime',

        width: 150,

        label: '日期',

        color: '#55C355'

      },

      {

        prop: 'sign_in',

        width: 152,

        label: '上班时间'

      },

      {

        prop: 'sign_out',

        width: 152,

        label: '下班时间'

      },

      {

        prop: 'work_hour',

        width: 110,

        label: '工时'

      },

      {

        prop: 'statusText',

        width: 110,

        label: '状态'

      }

    ],

    stripe: true,

    border: true,

    outBorder: true,

    row: [

      {

          "id": 1,

          "status": '正常',

          "datetime": "04-01",

          "sign_in_time": '09:30:00',

          "sign_out_time": '18:30:00',

          "work_hour": 8,

      }, {

          "id": 2,

          "status": '迟到',

          "datetime": "04-02",

          "sign_in_time": '10:30:00',

          "sign_out_time": '18:30:00',

          "work_hour": 7,

      }, {

          "id": 29,

          "status": '正常',

          "datetime": "04-03",

          "sign_in_time": '09:30:00',

          "sign_out_time": '18:30:00',

          "work_hour": 8,

      }, {

          "id": 318,

          "status": '休息日',

          "datetime": "04-04",

          "sign_in_time": '',

          "sign_out_time": '',

          "work_hour": '',

      }, {

          "id": 319,

          "status": '正常',

          "datetime": "04-05",

          "sign_in_time": '09:30:00',

          "sign_out_time": '18:30:00',

          "work_hour": 8,

      }

    ],

    msg: '暂无数据'

  },

  /**

   * 点击表格一行

   */

  onRowClick: function(e) {

    console.log('e: ', e)

  }

})