{"versions":{"1.0.13":{"name":"@hussar/vue-easy-tree","description":"vue-easy-tree project","version":"1.0.13","author":{"name":"@hussar"},"license":"MIT","private":false,"main":"index.js","keywords":["virtual","tree","bigdata","largedata","lazy loading","vue"],"files":["src","index.js"],"scripts":{"dev":"cross-env NODE_ENV=development webpack-dev-server --open --hot","build":"cross-env NODE_ENV=production webpack --progress --hide-modules"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"peerDependencies":{"vue":"^2.6.11"},"dependencies":{"vue-virtual-scroller":"~1.0.10"},"devDependencies":{"@babel/core":"^7.19.3","@babel/preset-env":"^7.19.4","babel-loader":"^8.2.5","core-js":"^3.6.5","cross-env":"^3.1.3","css-loader":"^2.1.0","file-loader":"^1.1.11","html-webpack-plugin":"^3.2.0","sass":"^1.55.0","sass-loader":"^7.1.0","uglifyjs-webpack-plugin":"^2.1.1","vue-loader":"^15.7.0","vue-template-compiler":"2.6.11","vue-template-es2015-compiler":"^1.6.0","webpack":"^4.14.0","webpack-bundle-analyzer":"^4.10.2","webpack-cli":"^3.0.8","webpack-dev-server":"^3.1.11"},"readmeFilename":"README.back.md","_id":"@hussar/vue-easy-tree@1.0.13","_integrity":"sha512-3HL0VAuz2POXf/WD+MovCpoce4WXHBKM2U19M9J9ZINUHXFbce54I4bdveyaD8gdcn9cOiDFTo/Fi8ZLBpMJDw==","_resolved":"/var/jenkins_home/workspace/fusion/common/front-npm-transfer/packages/@hussar_vue-easy-tree@1.0.13.tgz","_from":"file:/var/jenkins_home/workspace/fusion/common/front-npm-transfer/packages/@hussar_vue-easy-tree@1.0.13.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-3HL0VAuz2POXf/WD+MovCpoce4WXHBKM2U19M9J9ZINUHXFbce54I4bdveyaD8gdcn9cOiDFTo/Fi8ZLBpMJDw==","shasum":"9e5694eea1ab15b95cb0e1fea3c071099d2c2dde","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@hussar/vue-easy-tree/-/vue-easy-tree-1.0.13.tgz"},"contributors":[]}},"dist-tags":{"latest":"1.0.13"},"name":"@hussar/vue-easy-tree","time":{"modified":"2025-06-18T02:35:34.227Z","created":"2025-06-18T02:35:34.227Z","1.0.13":"2025-06-18T02:35:34.227Z"},"readme":"[![npm](https://img.shields.io/npm/v/@wchbrad/vue-easy-tree.svg)](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)\n[![vue2](https://img.shields.io/badge/vue-2.6+-brightgreen.svg)](https://vuejs.org/)\n[![last commit](https://img.shields.io/github/last-commit/wchbrad/vue-easy-tree.svg)](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)\n[![NPM downloads](https://img.shields.io/npm/dm/@wchbrad/vue-easy-tree.svg?style=flat)](https://npmjs.org/package/@wchbrad/vue-easy-tree)\n[![license](https://img.shields.io/npm/l/@wchbrad/vue-easy-tree.svg?maxAge=2592000)](http://www.opensource.org/licenses/mit-license.php)\n\n# vue-easy-tree\n\n**English** | [中文](./README.zh-CN.md)\n\n## Introduction\nA tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.\n\nBased on the tree style and function extracted from [element-ui](https://element.eleme.cn/#/en-US/component/tree)(License:MIT), combined with [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)(License:MIT) tree component.\n\n## v1.0 Feature List [![npm](https://img.shields.io/npm/v/@wchbrad/vue-easy-tree.svg)](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)\n\n-  Large data volume supports virtual scrolling\n-  Display of basic tree data\n-  Support checkbox selection\n-  Support lazy loading\n-  Expanded by default and selected by default\n-  Disable node\n-  Select nodes and obtain selected node information in a variety of ways\n-  Support custom node content\n-  Support node filtering\n-  Support accordion mode under non-virtual scrolling\n-  Support node drag and drop when non-lazy loading\n\n## Features\n\n-  Support virtual scrolling\n-  Not only supports tree-shaped data display with large amounts of data, but also supports data manipulation and modification\n\n\n## Install\n\n```\nnpm install @wchbrad/vue-easy-tree\n```\n\nor\n\n```\nyarn add @wchbrad/vue-easy-tree\n```\n\n## Mount\n\n### mount with global\n\nImport in the `main.js` file:\n\n```JS\nimport Vue from \"vue\";\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\n// Style file, you can customize the style or theme according to your needs\nimport \"@wchbrad/vue-easy-tree/src/assets/index.scss\"\n\nVue.use(VueEasyTree)\n```\n\n### mount with component\n\nImport in the component：\n\n```JS\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\n// Style file, you can customize the style or theme according to your needs\nimport \"@wchbrad/vue-easy-tree/src/assets/index.scss\"\n\nexport default {\n  components: {\n    VueEasyTree\n  }\n}\n```\n\n## Usage:\n\n:warning: When using virtual scrolling, `node-key` must be set\n\n```html\n<template>\n  <div class=\"ve-tree\" style=\"height:calc(100vh - 20px)\">\n  <!-- Just remove the height parameter when not using virtual scrolling -->\n    <vue-easy-tree\n      ref=\"veTree\"\n      node-key=\"id\"\n      height=\"calc(100vh - 20px)\"\n      :data=\"treeData\"\n      :props=\"props\"\n    ></vue-easy-tree>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      props: {\n        label: \"name\",\n        children: \"children\"\n      },\n      treeData: []\n    };\n  },\n  created() {\n    const data = [],\n      root = 8,\n      children = 3,\n      base = 1000;\n    for (let i = 0; i < root; i++) {\n      data.push({\n        id: `${i}`,\n        name: `test-${i}`,\n        children: []\n      });\n      for (let j = 0; j < children; j++) {\n        data[i].children.push({\n          id: `${i}-${j}`,\n          name: `test-${i}-${j}`,\n          children: []\n        });\n        for (let k = 0; k < base; k++) {\n          data[i].children[j].children.push({\n            id: `${i}-${j}-${k}`,\n            name: `test-${i}-${j}-${k}`\n          });\n        }\n      }\n    }\n    this.treeData = data;\n  }\n};\n</script>\n\n```\n\n## Change SCSS variables in the project\nBy creating a new style file, such as: `ve-tree-var.scss`, write the following content：\n\n```JS\n/* Change theme color variable */\n$--color-primary: #ea5404;\n\n/* Change the icon font path variable, required */\n$--font-path: \"~@wchbrad/vue-easy-tree/src/assets/fonts\";\n\n@import \"@wchbrad/vue-easy-tree/src/assets/index.scss\";\n```\n:warning: It should be noted that it is necessary to override the font path variable, and assign it to the relative path where the icon icon in @wchbrad/vue-easy-tree is located.\n\nThen directly import the above style files in `main.js`：\n```JS\nimport Vue from 'vue'\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\nimport \"./css/ve-tree-var.scss\"\n\nVue.use(VueEasyTree)\n```\n\n## Other properties and methods\n\n**From [element-ui official document](https://element.eleme.cn/#/en-US/component/tree)**<br />\n**When you need to use virtual scrolling, just add the `height` property, such as:**\n```html\n<vue-easy-tree :data=\"data\" height=\"calc(100vh - 20px)\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></vue-easy-tree>\n```\n\n**[Quick view of examples and api](./element-ui-tree.md)**\n\n\n## License\n\n[MIT](http://www.opensource.org/licenses/mit-license.php)","users":{}}