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(也有用,业务里碰到过,后期再补充)

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

  • 8
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农小白-RMS

谢谢老板

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值