zoukankan      html  css  js  c++  java
  • VUE中引入zTree

    从别人接口获取数据,然后在前台页面显示一颗树。我也是第一次使用zTree来做树,做完之后发现自己浪费了很多时间。获取数据上篇已经说了,这里就不在说了。

    要使用zTree需要引入对应的js

    官网地址:http://www.treejs.cn

    引入文件完成后,开始新建我们新建一个zTree.vue文件

    下面是比较关键的代码:

    画圈的地方是在树中选中的节点名字,他会显示在这个地方。

    用来存放organizeId,fullName。

    setting里面的根据自己的需求进行改变    enable: 设置 zTree 是否开启异步加载模式  默认值:false;

    idKey:为主键 ;pIdKey:为父节点的id ; rootPId一般为-1;

    url : zTree 节点数据保存节点链接的目标 URL 的属性名称。

    name : zTree 节点数据保存节点名称的属性名称。

    通过请求后台函数,通过回调函数的数据,初始化树,使用ztree的getNodeByParm方法根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象,并赋值。

    设置选中节点的真实的值。

    第一次使用ztree在这个过程中也绕了很多路,最后才绕出来。如有不足希望给位能够指点一下,谢谢。

  • 相关阅读:
    CentOS_关机与重启命令详解
    去除ArrayList重复的对象
    单项设计模式
    死循环的应用
    java学习心得-面向对象与面向过程
    计算机使用个人经验及日常维护
    linux操作系统简介
    集合
    项目学习4
    周末总结
  • 原文地址:https://www.cnblogs.com/lhd1998/p/11855652.html
Copyright © 2011-2022 走看看