{"_id":"@afwenming123/vue-easy-tree","_rev":"17-2e9706ed564f8c0ba24d27ecc7e78599","name":"@afwenming123/vue-easy-tree","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@afwenming123/vue-easy-tree","version":"1.0.1","keywords":["virtual","tree","bigdata","largedata","lazy loading","vue"],"author":{"name":"wchbrad","email":"chao.wu.brad@foxmail.com"},"license":"MIT","_id":"@afwenming123/vue-easy-tree@1.0.1","maintainers":[{"name":"cczc-cc","email":"equinoxcc@163.com"},{"name":"qmz.zrn","email":"qmz.zrn@gmail.com"},{"name":"af_zhangzhanyu","email":"464905332@qq.com"},{"name":"pupil_shaaob","email":"pupil_shaaob@163.com"},{"name":"af_lizhenqin","email":"1981277981@qq.com"},{"name":"z.serendipity","email":"820694952@qq.com"},{"name":"auguszhu","email":"zhuzifeng123@gmail.com"},{"name":"snakezqz","email":"1532135404@QQ.com"},{"name":"xiaoliu3637","email":"742620055@qq.com"},{"name":"zkyxwyl","email":"1173525028@qq.com"},{"name":"yiliuyiyi","email":"liuyi19952012@gmail.com"},{"name":"liqingkai","email":"1775738551@qq.com"},{"name":"maxin123","email":"674839242@qq.com"},{"name":"haodi12138","email":"1258970732@qq.com"},{"name":"tiamo520","email":"2308144603@qq.com"},{"name":"chenbochen","email":"1529231217@qq.com"},{"name":"zhaohao254412","email":"291722634@qq.com"},{"name":"liqisheng","email":"1103305221@qq.com"},{"name":"eraser-7","email":"yrz_77@163.com"},{"name":"pgz","email":"979817893@qq.com"},{"name":"zklm","email":"609363665@qq.com"},{"name":"huxinchao","email":"1478269746@qq.com"},{"name":"af_qushenghua","email":"kuhaiQush@163.com"},{"name":"taylor_tzh","email":"zenghui6128@163.com"},{"name":"yinkun0817","email":"757593451@qq.com"},{"name":"af_lky","email":"1303809094@qq.com"},{"name":"dyy1","email":"2205529731@qq.com"},{"name":"goslingjunior","email":"1447314119@qq.com"},{"name":"weichen1011","email":"wei_chen1011@163.com"},{"name":"gggood","email":"1729711680@qq.com"},{"name":"myq3035","email":"15664933035@163.com"},{"name":"afgw","email":"1193013007@qq.com"},{"name":"zhangzhenyu_125306","email":"809534382@qq.com"},{"name":"mrriver","email":"1209577113@qq.com"},{"name":"liliuzhao","email":"liliuzhao0917@gmail.com"},{"name":"zhangkk","email":"904711365@qq.com"},{"name":"chengjianing","email":"201393235@qq.com"},{"name":"afhwq","email":"767849845@qq.com"},{"name":"afmt","email":"1589988913@qq.com"},{"name":"joecdy","email":"1020684792@qq.com"},{"name":"sxgg7758521","email":"sxgg7758521@163.com"},{"name":"aofeng","email":"aofeng_kfnpm@163.com"}],"homepage":"https://github.com/wchbrad/vue-easy-tree#readme","bugs":{"url":"https://github.com/wchbrad/vue-easy-tree/issues"},"dist":{"shasum":"6fca0f88150966a8344b8545b26d267275318f39","tarball":"https://registry.npmjs.org/@afwenming123/vue-easy-tree/-/vue-easy-tree-1.0.1.tgz","fileCount":51,"integrity":"sha512-5EtQsMwERGAL0ailERvkrAtSXUYaGwY3UocMZ77NgCLbo1Bg1mWBCPwbkbAysjhDsigVjwj26B9oPMFxz1I8LA==","signatures":[{"sig":"MEUCIQCxzWmE2xmHhVMWNSgxl17aDdQVzAG25oHoRQfyX60F3AIgOn0eJEQMnXSs0KOMLGN7b9W/o2XipeVEZOCNKZ4YAvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481933},"main":"./dist/vue-easy-tree.js","gitHead":"e579200589809028c28317fcf4cdc5037bee574e","private":false,"scripts":{"dev":"cross-env NODE_ENV=development webpack-dev-server --open --hot","build":"cross-env NODE_ENV=production webpack --progress --hide-modules"},"_npmUser":{"name":"aofeng","email":"aofeng_kfnpm@163.com"},"repository":{"url":"git+https://github.com/wchbrad/vue-easy-tree.git","type":"git"},"_npmVersion":"10.8.3","description":"A Vue.js project","directories":{},"_nodeVersion":"18.20.3","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","vue-virtual-scroller":"~1.0.10"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"core-js":"^3.6.5","webpack":"^4.14.0","cross-env":"^3.1.3","css-loader":"^2.1.0","vue-loader":"^15.7.0","@babel/core":"^7.19.3","file-loader":"^1.1.11","webpack-cli":"^3.0.8","babel-loader":"^8.2.5","@babel/preset-env":"^7.19.4","webpack-dev-server":"^3.1.11","html-webpack-plugin":"^3.2.0","vue-template-compiler":"2.6.11","uglifyjs-webpack-plugin":"^2.1.1","vue-template-es2015-compiler":"^1.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-easy-tree_1.0.1_1730953245973_0.4502440699853052","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-11-07T04:20:45.830Z","modified":"2026-07-15T08:19:08.152Z","1.0.1":"2024-11-07T04:20:46.234Z"},"bugs":{"url":"https://github.com/wchbrad/vue-easy-tree/issues"},"author":{"name":"wchbrad","email":"chao.wu.brad@foxmail.com"},"license":"MIT","homepage":"https://github.com/wchbrad/vue-easy-tree#readme","keywords":["virtual","tree","bigdata","largedata","lazy loading","vue"],"repository":{"url":"git+https://github.com/wchbrad/vue-easy-tree.git","type":"git"},"description":"A Vue.js project","maintainers":[{"email":"aofeng_kfnpm@163.com","name":"aofeng"}],"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## 介绍\n\n一款基于vue2.x，同时支持少量数据或大量数据、多种功能和虚拟滚动的树组件。\n\n基于[element-ui](https://element.eleme.cn/#/zh-CN/component/tree)(License:MIT)中抽取的tree样式和功能，结合[vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)(License:MIT)所做的树组件。\n\n## v1.0 功能列表 [![npm](https://img.shields.io/npm/v/@wchbrad/vue-easy-tree.svg)](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)\n\n-   大数据量支持虚拟滚动\n-   基本树形数据的展示\n-   支持checkbox选择\n-   支持懒加载\n-   默认展开和默认选中\n-   禁用节点\n-   通过多种方式选中节点和获取选中的节点信息\n-   支持自定义节点内容\n-   支持节点过滤\n-   非虚拟滚动下，支持手风琴模式\n-   非懒加载时，支持节点拖拽\n\n## 特点\n\n-   支持虚拟滚动\n-   不仅支持大数据量的树形数据展示，还支持数据的操作和更改\n\n## 安装\n\n```\nnpm install @wchbrad/vue-easy-tree\n```\n\n或\n\n```\nyarn add @wchbrad/vue-easy-tree\n```\n\n## 引入\n\n### 全局引入\n\n在 `main.js` 文件中引入：\n\n```JS\nimport Vue from \"vue\";\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\n// 样式文件，可以根据需要自定义样式或主题\nimport \"@wchbrad/vue-easy-tree/src/assets/index.scss\"\n\nVue.use(VueEasyTree)\n```\n\n### 组件引入\n\n在组件中引入：\n\n```JS\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\n// 样式文件，可以根据需要自定义样式或主题\nimport \"@wchbrad/vue-easy-tree/src/assets/index.scss\"\n\nexport default {\n  components: {\n    VueEasyTree\n  }\n}\n```\n\n## 使用:\n\n:warning: 在使用虚拟滚动时，必须设置 `node-key`。\n\n```html\n<template>\n  <div class=\"ve-tree\" style=\"height:calc(100vh - 20px)\">\n  <!-- 不使用虚拟滚动时只需去掉height参数即可 -->\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## 在项目中改变 SCSS 变量\n通过新建一个样式文件，如：`ve-tree-var.scss`，写入以下内容：\n\n```JS\n/* 改变主题色变量 */\n$--color-primary: #ea5404;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: \"~@wchbrad/vue-easy-tree/src/assets/fonts\";\n\n@import \"@wchbrad/vue-easy-tree/src/assets/index.scss\";\n```\n:warning: 需要注意的是，覆盖字体路径变量是必需的，将其赋值为 @wchbrad/vue-easy-tree 中 icon 图标所在的相对路径即可。\n\n然后在 `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\n## 其它属性和方法\n\n**来自[element-ui 官方文档](https://element.eleme.cn/#/zh-CN/component/tree)**<br />\n**需要使用虚拟滚动时，增加 `height` 属性即可，如：**\n```html\n<vue-easy-tree :data=\"data\" height=\"calc(100vh - 20px)\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></vue-easy-tree>\n```\n\n**[快速查看示例和api](./element-ui-tree.zh-CN.md)**\n\n\n## License\n\n[MIT](http://www.opensource.org/licenses/mit-license.php)\n","readmeFilename":"README.md"}