{"id":16183886,"url":"https://github.com/crazymryan/vue-tree-color","last_synced_at":"2025-05-07T15:20:33.433Z","repository":{"id":45511225,"uuid":"250127687","full_name":"CrazyMrYan/vue-tree-color","owner":"CrazyMrYan","description":"Nice tree look at that ","archived":false,"fork":false,"pushed_at":"2024-05-31T01:18:11.000Z","size":1183,"stargazers_count":95,"open_issues_count":7,"forks_count":24,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-01T22:41:34.235Z","etag":null,"topics":["tree","vue","vue-org-tree","vue-tree-color"],"latest_commit_sha":null,"homepage":"https://crazymryan.github.io/vue-tree-color","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrazyMrYan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-26T01:02:02.000Z","updated_at":"2025-01-08T03:10:35.000Z","dependencies_parsed_at":"2024-01-13T06:53:23.488Z","dependency_job_id":"09da7111-8b7b-447d-9acd-3ea55f0e92e2","html_url":"https://github.com/CrazyMrYan/vue-tree-color","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":"0.030303030303030276","last_synced_commit":"eeb700b880db628a286d61be7cd13e36c246ca4c"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrazyMrYan%2Fvue-tree-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrazyMrYan%2Fvue-tree-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrazyMrYan%2Fvue-tree-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrazyMrYan%2Fvue-tree-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrazyMrYan","download_url":"https://codeload.github.com/CrazyMrYan/vue-tree-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902678,"owners_count":21822276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tree","vue","vue-org-tree","vue-tree-color"],"created_at":"2024-10-10T07:07:52.474Z","updated_at":"2025-05-07T15:20:33.408Z","avatar_url":"https://github.com/CrazyMrYan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ch1 align=\"center\"\u003e vue-tree-color \u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://img.shields.io/github/stars/CrazyMrYan/vue-tree-color?style=social.svg\" /\u003e\n\u003c/p\u003e\n\n\u003e 源码分支在 [sourceCode](https://github.com/CrazyMrYan/vue-tree-color/tree/sourceCode)\n\n本项目是 针对 vue-org-tree 做得一个 demo ,并且根据公司项目进行修改 上传了 npm 包 下面我们开始讲解\n\n\n## 浏览器兼容\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"Edge\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eEdge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari |\n| --------- | --------- | --------- | --------- |\n| Edge| last 2 versions| last 2 versions| last 2 versions\n\n\n## History Star\n\n![Star History Chart](https://api.star-history.com/svg?repos=CrazyMrYan/blog\u0026type=Date)\n\n## 前言\n\n\u003e 最近公司项目（`Vue` + `Element` ）需求有用到 `tree` ，所以呢我去网上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 `iview` 的组织结构树  `vue-org-tree` ,但是由于文档不是特别易懂，自己踩了很多坑。不过定制性特别高，基本上会用到的方法都有了。所以今天来给大家讲解下。\n\u003e\n\u003e 自己也根据业务需求修改了部分内容，下面我也会介绍到我修改的内容，重新修改了包上传到了npm\n\n![image-20200326094911709](https://user-gold-cdn.xitu.io/2020/3/26/17114cc093c42e43?w=909\u0026h=282\u0026f=png\u0026s=6711)\n\n## 安装\n\n### NPM\n\n``` javascript\n# use npm\nnpm install vue-tree-color\n\n```\n\n### 安装 loader \n\n温馨提示：不安装less-loader基本上都会报错\n\n``` javascript\nnpm install --save-dev less less-loader\n```\n\n### Import Plugins\n\n``` javascript\nimport Vue from 'vue'\nimport Vue2OrgTree from 'vue-tree-color'\n\nVue.use(Vue2OrgTree)\n```\n\n## 简单起步\n\n严老湿这边呢，就直接使用` Vue-cli `起步了，`vue-tree-color`安装成功之后，我们就直接使用了，在`Vue`页面或者组件中使用`vue2-org-tree` 标签，动态绑定data\n\n### 基本创建\n\n``` html\n\u003cvue2-org-tree :data=\"data\"/\u003e\n```\n\ndata数据放入页面中\n\nid 每个元素不同的ID ，label为name， children为自己的子集数据\n\n``` javascript\ndata: {\n        id: 0,\n        label: \"XXX科技有限公司\",\n        children: [\n          {\n            id: 2,\n            label: \"产品研发部\",\n            children: [\n              {\n                id: 5,\n                label: \"研发-前端\"\n              },\n              {\n                id: 6,\n                label: \"研发-后端\"\n              },\n              {\n                id: 9,\n                label: \"UI设计\"\n              },\n              {\n                id: 10,\n                label: \"产品经理\"\n              }\n            ]\n          },\n          {\n            id: 3,\n            label: \"销售部\",\n            children: [\n              {\n                id: 7,\n                label: \"销售一部\"\n              },\n              {\n                id: 8,\n                label: \"销售二部\"\n              }\n            ]\n          },\n          {\n            id: 4,\n            label: \"财务部\"\n          },\n          {\n            id: 9,\n            label: \"HR人事\"\n          }\n        ]\n      }\n```\n\n效果图：\n\n\n![](https://user-gold-cdn.xitu.io/2020/3/26/17114cd3d86d600d?w=909\u0026h=282\u0026f=png\u0026s=6186)\n\n### 排列方式\n\n刚刚我们看到的是默认排列方式 ，其实还有一种排列方式，我们一起来看看\n\n#### 水平排列\n\n`horizontal`  是水平排列方式，我们来实践一下吧，它的参数是`true`、`false`\n\n``` html\n\u003cvue2-org-tree\n\t:data=\"data\"\n    :horizontal=\"true\"\n/\u003e\n```\n\n看看效果如何：\n\n\n![](https://user-gold-cdn.xitu.io/2020/3/26/17114cd9b7ad8807?w=579\u0026h=556\u0026f=png\u0026s=7412)\n\n### 修改背景色\n\n​\t使用 `label-class-name `  我们还可以动态绑定自定义`class`\n\n``` html\n\u003cvue2-org-tree \n\t:data=\"data\" \n    :horizontal=\"true\"      \n    :label-class-name=\"labelClassName\"           \n/\u003e\n```\n\n我们一起来尝试一下吧！\n\njs:\n\n``` javascript\n data() {\n    return {\n\t\tlabelClassName:\"bg-color-orange\"\n    }\n }\n```\n\ncss：\n\n``` css\n.bg-color-orange{\n    color: #fff;\n    background-color: orange;\n}\n```\n\n**警告⚠ ：`style`标签里不能加  `scoped` 不然自定义样式无效**\n\n看看效果图\n\n\n![](https://user-gold-cdn.xitu.io/2020/3/26/17114cdc73d12fe8?w=522\u0026h=586\u0026f=png\u0026s=6332)\n\n### 折叠展示\n\n折叠展示效果\n\n``` html\n\u003cvue2-org-tree \n\t:data=\"data\" \n    :horizontal=\"true\"      \n    :label-class-name=\"labelClassName\"    \n    collapsable\n/\u003e\n```\n\n\n![](https://user-gold-cdn.xitu.io/2020/3/26/17114ce106585fbf?w=340\u0026h=209\u0026f=png\u0026s=1601)\n\n折叠效果是有了，那么怎么展开呢？\n\n``` html\n\u003cvue2-org-tree \n\t:data=\"data\" \n    :horizontal=\"true\"      \n    :label-class-name=\"labelClassName\"    \n    collapsable\n\t@on-expand=\"onExpand\"\n/\u003e\n```\n\njs:\n\n``` javascript\ncollapse(list) {\n   \tvar _this = this;\n    list.forEach(function(child) {\n        if (child.expand) {\n          child.expand = false;\n        }\n        child.children \u0026\u0026 _this.collapse(child.children);\n\t});\n},\nonExpand(e,data) {\n    if (\"expand\" in data) {\n       data.expand = !data.expand;\n    \tif (!data.expand \u0026\u0026 data.children) {\n       \t\tthis.collapse(data.children);\n    \t}\n    } else {\n        this.$set(data, \"expand\", true);\n    }\n},\n```\n\n请看效果图：\n\n![](https://user-gold-cdn.xitu.io/2020/3/26/17114cc09d015cae?w=639\u0026h=438\u0026f=gif\u0026s=35899)\n\n问题又来了，默认展开如何实现？\n\n请看大屏幕\n\n``` javascript\ntoggleExpand(data, val) {\n\tvar _this = this;\n    if (Array.isArray(data)) {\n        data.forEach(function(item) {\n          _this.$set(item, \"expand\", val);\n          if (item.children) {\n            _this.toggleExpand(item.children, val);\n          }\n      \t});\n    } else {\n        this.$set(data, \"expand\", val);\n        if (data.children) {\n          _this.toggleExpand(data.children, val);\n        }\n    }\n}\n```\n\n在请求完数据之后直接调用,或者生命周期调用，可以自由发挥\n\n第一个参数是你的资源data，第二个参数是全部展开或否\n\n``` javascript\nthis.toggleExpand(this.data,true)\n```\n\n上效果图：\n\n\n![](https://user-gold-cdn.xitu.io/2020/3/26/17114cfca059bc86?w=506\u0026h=567\u0026f=png\u0026s=6817)\n\n\n\n## 深入观察\n\n`vue2-org-tree` 向我们抛出了几个事件，我们先看看有哪些事件\n\n### 点击事件\n\n`on-node-click` 就是被抛出的点击事件\n\n``` html\n\u003cvue2-org-tree \n\t:data=\"data\" \n\t@on-node-click=\"NodeClick\"\n/\u003e\n```\n\n我们在方法里面写一个NodeClick用来接受点击触发的值\n\n``` javascript\nNodeClick(e,data){\n\tconsole.log(e)\n    // e 为 event\n\tconsole.log(data)\n    // 当前项的所有详情 如：id label children\n}\n```\n\n打印结果：\n\n``` javascript\n// e 的打印\n{\n    isTrusted: true\n    screenX: 720\n    screenY: 308\n    clientX: 720\n    clientY: 205\n    ctrlKey: false\n    shiftKey: false\n    altKey: false\n    metaKey: false\n    button: 0\n    buttons: 0\n    relatedTarget: null\n    pageX: 720\n    ......\n}\n// data的打印\n{\n    id: 2\n\tlabel: \"产品研发部\"\n\tchildren: Array(4)\n}\n```\n\n### 移入移出\n\n它还向我们抛出了移入移出事件，返回值与点击事件大致相同\n\n``` javascript\n\u003cvue2-org-tree \n\t:data=\"data\" \n    :horizontal=\"true\"      \n    :label-class-name=\"labelClassName\"    \n    collapsable\n\t@on-expand=\"onExpand\"\n\t@on-node-mouseover=\"onMouseover\"\n    @on-node-mouseout=\"onMouseout\"\n/\u003e\n```\n\n### 拓展移入移出\n\n​\t来了老弟？我们做移入移出，肯定是要有功能的对不对？\n\n每当我们的鼠标移入到小盒子里就出现一个模态框用来展示data内容\n\n``` html\n\u003cvue2-org-tree \n\t:data=\"data\" \n    :horizontal=\"true\"  \n\tname=\"test\"    \n    :label-class-name=\"labelClassName\"\n\tcollapsable\n\t@on-expand=\"onExpand\"\n\t@on-node-mouseover=\"onMouseover\"\n    @on-node-mouseout=\"onMouseout\"\n/\u003e\n\u003c!-- 创建浮窗盒子 --\u003e\n\u003cdiv v-show=\"BasicSwich\" class=\"floating\"\u003e\n    \u003cp\u003eID:{{BasicInfo.id}}\u003c/p\u003e\n    \u003cp\u003eName:{{BasicInfo.label}}\u003c/p\u003e\n\u003c/div\u003e\n```\n\njs:\n\n``` javascript\n// 声明变量\ndata() {\n    return {\n\t\tBasicSwich:false,\n\t\tBasicInfo:{id:null,label:null}\n    }\n}\n// 方法\nonMouseout(e, data) {\n    this.BasicSwich = false\n},\nonMouseover(e, data) {\n    this.BasicInfo = data;\n    this.BasicSwich = true;\n    var floating =  document.getElementsByClassName('floating')[0];\n    floating.style.left = e.clientX +'px';\n    floating.style.top = e.clientY+'px';\n},\n```\n\ncss:\n\n``` css\n/* 盒子css */\n.floating{\n    background: rgba(0, 0, 0, 0.7);\n    width: 160px;\n    height: 100px;\n    position: absolute;\n    color: #fff;\n    padding-top: 15px;\n    border-radius: 15px;\n    padding-left: 15px;\n    box-sizing: border-box;\n    left:0;\n    top: 0;\n    transition: all 0.3s;\n\tz-index: 999;\n\ttext-align: left;\n\tfont-size: 12px;\n}\n```\n\n上效果图：\n\n![GIF](https://user-gold-cdn.xitu.io/2020/3/26/17114cc0959604ab?w=976\u0026h=566\u0026f=gif\u0026s=30669)\n\n### 自定义方块颜色\n\n这个地方是严老湿在原有的基础上进行了封装改良，我在内部文件中修改了部分内容话不多说，我们上代码看看\n\n传`judge`值给组件\n\n--------------------------------------------------------------------------------------------------\n**2.1.5 船新版本：** \n\njudge 是一个`Object`格式 里面存在着一个值 `{swtich:true || false}`\n不传或者传入false 都默认为不需要自定义class\n\n新增`NodeClass` 参数 `NodeClass` 是一个`Array`格式 类似于`Echarts`的 `color` 参数，\n\n如果有放入你需要的`class` 如果没有则采取默认格式\n``` javascript\n  NodeClass:[\n      \"myred\",\n      \"myger\",\n      \"myblue\"\n  ]\n```\n在`data`数据中需要的项中添加 你就需要这样做\n``` javascript\n  {\n      id: 5,\n      label: \"研发-前端\",\n      swtich: \"myred\"\n  },\n  {\n      id: 6,\n      label: \"研发-后端\",\n      swtich: \"myger\"\n  },\n```\n\nhtml\n\n``` html\n\u003cvue2-org-tree \n\t:data=\"data\" \n  :horizontal=\"true\"  \n\tname=\"test\"    \n  :label-class-name=\"labelClassName\"\n\tcollapsable\n\t@on-expand=\"onExpand\"\n\t@on-node-mouseover=\"onMouseover\"\n  @on-node-mouseout=\"onMouseout\"\n  :judge=\"judge\"\n  :NodeClass=\"NodeClass\"\n/\u003e\n```\n![](http://crazy-x-lovemysoul-x-vip.img.abc188.com/images/tree.png)\n\n更多详细文章 可以查阅 https://mp.weixin.qq.com/s/QLzXPxloTJh1fVAY77sZzg\n\n--------------------------------------------------------------------------------------------------\n\n**旧版本**\njs\n\n``` javascript\njudge: { id: 6 },\n```\n\njudge是传给组件分辨区别的对象\n\nid和6同时为判断条件，\n\n上面的那段代码的意思就是，如果id为6的那一项进行修改颜色\n\n康康效果图吧\n\n![](http://crazy.lovemysoul.vip/images/judge.jpg)\n\n\n如果你要修改更多的项，那就得换个判断条件了\n\n比如数据里面携带了判断条件你可以这样\n\n``` javascript\njudge: { swtich: false },\n```\n\ndata\n\n``` javascript\ndata: {\n\tid: 0,\n\tlabel: \"XXX科技有限公司\",\n    children: [\n        {\n             id: 2,\n             label: \"产品研发部\",\n             children: [\n                 {\n                      id: 5,\n                      label: \"研发-前端\",\n                      swtich: false\n                  },\n                  {\n                      id: 6,\n                      label: \"研发-后端\",\n                      swtich: false\n                   },\n                   {\n                      id: 9,\n                      label: \"UI设计\"\n                   },\n                   {\n                      id: 10,\n                      label: \"产品经理\"\n                   }\n              ]\n          },\n          {\n              id: 3,\n              label: \"销售部\",\n              children: [\n                  {\n                      id: 7,\n                      label: \"销售一部\",\n                      swtich: false\n                  },\n                  {\n                      id: 8,\n                      label: \"销售二部\",\n                      swtich: false\n                  }\n              ]\n          },\n          {\n               id: 4,\n               label: \"财务部\"\n          },\n          {\n               id: 9,\n               label: \"HR人事\"\n          }\n      ]\n },\n```\n\n效果图：\n\n![](http://crazy.lovemysoul.vip/images/judge1.jpg)\n\n但是值得你注意的是，这两个颜色是通过类名来自定义的\n\n条件中查询成功的class是`.org-bg-err ` \n\n条件中查询失败的class是 `.org-bg-res `\n\n## API\n\n### props\n\n\n| prop              | descripton                         |          type          |                          default                           |\n| ----------------- | ---------------------------------- | :--------------------: | :--------------------------------------------------------: |\n| data              |                                    |        `Object`        |                                                            |\n| props             | configure props                    |        `Object`        | `{label: 'label', children: 'children', expand: 'expand'}` |\n| labelWidth        | node label width                   |  `String` \\| `Number`  |                           `auto`                           |\n| collapsable       | children node is collapsable       |       `Boolean`        |                           `true`                           |\n| renderContent     | how to render node label           |       `Function`       |                             -                              |\n| labelClassName    | node label class                   | `Function` \\| `String` |                             -                              |\n| selectedKey       | The key of the selected node       |        `String`        |                             -                              |\n| selectedClassName | The className of the selected node | `Function` \\| `String` |                             -                              |\n\n### events\n\n| event name | descripton        | type       |\n| ---------- | ----------------- | :--------- |\n| click      | Click event       | `Function` |\n| mouseover  | onMouseOver event | `Function` |\n| mouseout   | onMouseOut event  | `Function` |\n\n  * ### Call events\n\n#### on-expand\n\n鼠标点击时调用它。\n\n- params `e` `Event`\n- params `data` `Current node data`\n\n#### on-node-click\n\nwell be called when the node-label clicked\n\n- params `e` `Event`\n- params `data` `Current node data`     \n\n#### on-node-mouseover\n\n当鼠标悬停时调用它。\n\n- params `e` `Event`\n- params `data` `Current node data`   \n\n#### on-node-mouseout\n\n当鼠标离开时调用它。\n\n- params `e` `Event`\n- params `data` `Current node data`\n\n## 总结\n\n最后附上Git地址：https://github.com/CrazyMrYan/vue-tree-color \n\n预览地址：http://crazy.lovemysoul.vip/gitdemo/vue-tree-color \n\n关注“悲伤日记”查看更多精彩文章\n![](https://user-gold-cdn.xitu.io/2020/3/26/17114de4a8c27045?w=414\u0026h=415\u0026f=png\u0026s=77015)\n\n鸣谢 ： https://github.com/hukaibaihu/vue-org-tree\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazymryan%2Fvue-tree-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrazymryan%2Fvue-tree-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazymryan%2Fvue-tree-color/lists"}