微信小程序自定义组件-树形数据表格（进阶版）

前言

之前上传过一个简单版的，说以后项目可能用，还真被我说中了，但是之前那个版本实在是太简单了根本没法用，所以最近我又花了一天的时间重新整理写了一份进阶版的树形数据表格。首先还是直接上效果图：

通过上面的效果图，可以看出我做了以下的进阶升级：
1、自定义单元格的宽度、溢出部分可自动换行；
2、自定义表头数据 可支持不同场景的多次使用；
3、利用订阅者模式实现行数据的点击事件；
4、自定义列数据的颜色样式；
5、固定表头（这个效果图没体现出来但是可以实现）；
…

一、下载引用

下载方式：
1.npm

npm i wxminiprogram-treetable-component

（上传之后部分代码又修改了）
2.Github
点击下载：微信小程序自定义组件——树形数据表格

引用
在页面的 json 配置文件中添加自定义组件的配置

{
   
   
  "navigationBarTitleText": "树形数据表格",
  "usingComponents": {
   
   
    "treeGrid": "/components/treegrid-treegrid/treegrid-treegrid"
  }
}

二、使用treegrid组件

<!-- wxml -->
<treeGrid 
   headers="{
    
    {tableHeader}}" 
   data="{
    
    { row }}" 
   border="{
    
    { border }}"
   maxHeight="{
    
    {maxHeight}}"
   bind:rowclick="onRowClick"
 />
 

树形表格主要利用的还是递归思想实现多层数据的展示，为了更好的监听到孙子组件的点击事件所以在此借用订阅者模式实现行点击事件

const onfire = require("../../utils/onfire1.0.6.js");
Page({
   
   
  data: {
   
   
    tableHeader: [
      {
   
   
        prop: 'deviceAddress',
        width: 400,
        label: '通讯地址',
        color: '#55c355'
      },
      {
   
   
        prop: 'deviceType',
        width: 300,
        label: '设备类型'
      },
      {
   
   
        prop: 'deviceStatus',
        width: 150,
        label: '设备状态',
      },
      {
   
   
        prop: 'deviceToken',
        width: 400,
        label: '资产编号'
      },
      {
   
   
        prop: 'routName',
        width: 300,
        label: '线路名称'
      },
      {
   
   
        prop: 'lineloss',
        width: 150,
        label: '线损率'
      }
    ],
    border: true,
    outBorder: true,
    maxHeight:"90vh",
    row: {
   
   
      "id": 1,
      "level": 1,
      "deviceAddress": '52010001',
      "deviceType": "移动式监测仪",
      "deviceStatus": '在线',
      "deviceToken": '52010001',
      "routName": '线路一号',
      "lineloss": '21.02%',
      "nodes": [
        {
   
   
          "id": 2,
          "level": 2,
          "deviceAddress": '52010001',
          "deviceType": "移动式监测仪",
          "deviceStatus": '在线',
          "deviceToken": '52010001',
          "routName": '线路一号',
          "lineloss": '21.02%',
          "nodes": [
            {
   
   
              "id": 3,
              "level": 3,
              "deviceAddress": '52010001',
              "deviceType": "移动式监测仪",
              "deviceStatus": '在线',
              "deviceToken": '52010001',
              "routName": '这是一个很长名字的线路',
              "lineloss": '21.02%',
              "nodes": []
            }
          ]
        },
        {
   
   
          "id": 4,
          "level": 2,
          "deviceAddress": '52010001',
          "deviceType": "移动式监测仪",
          "deviceStatus": '在线',
          "deviceToken": '52010001',
          "routName": '线路一号',
          "lineloss": '21.02%',
          "nodes": [