Debug-003-el-tree中的一些属性&方法&坑

这一节估计是要和项目开发一样分好多次版本迭代发布的。el-tree在项目中应用还比较多，涉及权限，建筑层级等等业务的问题可能都要用到，坑也比较多。今天把碰到的需要和使用过的一小部分内容分享一下。Vue2，3会有一点差异，但不大，具体问题具体分析吧。

先附两张图吧：

1.@node-click 点击方法：节点被点击后执行的回调

         <!-- 基本结构 -->
<el-tree ref="tree"
                 v-loading="loading"
                 class="flow-tree"
                 :data="data"
                 node-key="id"
                 show-checkbox
                 :default-expanded-keys="treeNodeArr"
                 :default-checked-keys="treeNodeArr"
                 highlight-current
                 :props="parms"
                 :filter-node-method="filterNode"
                 @check-change="handleCheckClick"
                 @node-click="handleNodeClick">
          <span slot-scope="{ node }"
                class="tree-label">
            {{ node.level ===1?node.data.dcuDeviceName:node.data.deviceName }} &nbsp;{{ node.data.deviceStatus ===1? 'Online' : 'Offline' }}
          </span>
</el-tree>



//方法

    handleNodeClick (data, node) {
      this.$emit("nodeClick", data, node)
    },

其他先不用看，el-tree中的node-click方法中有两个常用的参数（data,node）,很好用，官网是这样说的：

其实有三个哈，第三个我参与的业务用的比较少吧。打印看一下:

第一个其实就是业务数据，其实是这棵树（:data=“data”）中的某层级下的一个节点的数据（你点击的哪一个就是哪一个），data其实也是后端返回的嘛，调接口拿的，格式还是要符合el-tree的基本要求。
第二个Node中的其实有很多参数做判断的时候很管用，比如：
checked（是否选中）
data（就是单个节点后端返回的的全部数据）
parent（父亲节点）
childNodes（子节点）
level（在这棵树的层级）
expanded（也有用，业务里碰到过，后期再补充）

今天先这么多，持续更新。。