|
| 1 | +[](https://www.npmjs.com/package/vue-easytable) |
| 2 | +[](https://vuejs.org/) |
| 3 | +[](https://npmjs.org/package/vue-easytable) |
| 4 | +[](https://codecov.io/gh/Happy-Coding-Clans/vue-easytable) |
| 5 | +[](http://www.opensource.org/licenses/mit-license.php) |
| 6 | +[](https://discord.gg/gBm3k6r) |
| 7 | +[](https://gitter.im/vue-easytable/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) |
| 8 | + |
| 9 | +# vue-easytree |
| 10 | + |
| 11 | +**English** | [中文](./README.zh-CN.md) |
| 12 | + |
| 13 | +## Introduction |
| 14 | +A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling. |
| 15 | + |
| 16 | +Based 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. |
| 17 | + |
| 18 | +## v1.0.0 Feature List[](https://www.npmjs.com/package/vue-easytable ) |
| 19 | + |
| 20 | +- Large data volume supports virtual scrolling |
| 21 | +- Display of basic tree data |
| 22 | +- Support checkbox selection |
| 23 | +- Support lazy loading |
| 24 | +- Expanded by default and selected by default |
| 25 | +- Disable node |
| 26 | +- Select nodes and obtain selected node information in a variety of ways |
| 27 | +- Support custom node content |
| 28 | +- Support node filtering |
| 29 | +- Support accordion mode under non-virtual scrolling |
| 30 | +- Support node drag and drop when non-lazy loading |
| 31 | + |
| 32 | +## Features |
| 33 | + |
| 34 | +- Support virtual scrolling |
| 35 | +- Not only supports tree-shaped data display with large amounts of data, but also supports data manipulation and modification |
| 36 | + |
| 37 | +## Demo |
| 38 | + |
| 39 | +xxxxx- need feature demonstration |
| 40 | + |
| 41 | +## Install |
| 42 | + |
| 43 | +``` |
| 44 | +npm install vue-easytree |
| 45 | +``` |
| 46 | + |
| 47 | +or |
| 48 | + |
| 49 | +``` |
| 50 | +yarn add vue-easytree |
| 51 | +``` |
| 52 | + |
| 53 | +## Mount |
| 54 | + |
| 55 | +### mount with global |
| 56 | + |
| 57 | +Import in the `main.js` file: |
| 58 | + |
| 59 | +```JS |
| 60 | +import Vue from "vue"; |
| 61 | +import VueEasyTree from "vue-easytree"; |
| 62 | +// Style file, you can customize the style or theme according to your needs |
| 63 | +import "vue-easytree/src/assets/index.scss" |
| 64 | + |
| 65 | +Vue.use(VueEasyTree) |
| 66 | +``` |
| 67 | + |
| 68 | +### mount with component |
| 69 | + |
| 70 | +Import in the component： |
| 71 | + |
| 72 | +```JS |
| 73 | +import VueEasyTree from "vue-easytree"; |
| 74 | +// Style file, you can customize the style or theme according to your needs |
| 75 | +import "vue-easytree/src/assets/index.scss" |
| 76 | + |
| 77 | +export default { |
| 78 | + components: { |
| 79 | + VueEasyTree |
| 80 | + } |
| 81 | +} |
| 82 | +``` |
| 83 | + |
| 84 | +## Usage: |
| 85 | + |
| 86 | +```html |
| 87 | +<template> |
| 88 | + <div class="ve-tree" style="height:calc(100vh - 20px)"> |
| 89 | + <!-- Just remove the height parameter when not using virtual scrolling --> |
| 90 | + <vue-easy-tree |
| 91 | + ref="veTree" |
| 92 | + node-key="id" |
| 93 | + height="calc(100vh - 20px)" |
| 94 | + :data="treeData" |
| 95 | + :props="props" |
| 96 | + ></vue-easy-tree> |
| 97 | + </div> |
| 98 | +</template> |
| 99 | + |
| 100 | +<script> |
| 101 | +export default { |
| 102 | + data() { |
| 103 | + return { |
| 104 | + props: { |
| 105 | + label: "name", |
| 106 | + children: "children" |
| 107 | + }, |
| 108 | + treeData: [] |
| 109 | + }; |
| 110 | + }, |
| 111 | + created() { |
| 112 | + const data = [], |
| 113 | + root = 8, |
| 114 | + children = 3, |
| 115 | + base = 1000; |
| 116 | + for (let i = 0; i < root; i++) { |
| 117 | + data.push({ |
| 118 | + id: `${i}`, |
| 119 | + name: `test-${i}`, |
| 120 | + children: [] |
| 121 | + }); |
| 122 | + for (let j = 0; j < children; j++) { |
| 123 | + data[i].children.push({ |
| 124 | + id: `${i}-${j}`, |
| 125 | + name: `test-${i}-${j}`, |
| 126 | + children: [] |
| 127 | + }); |
| 128 | + for (let k = 0; k < base; k++) { |
| 129 | + data[i].children[j].children.push({ |
| 130 | + id: `${i}-${j}-${k}`, |
| 131 | + name: `test-${i}-${j}-${k}` |
| 132 | + }); |
| 133 | + } |
| 134 | + } |
| 135 | + } |
| 136 | + this.treeData = data; |
| 137 | + } |
| 138 | +}; |
| 139 | +</script> |
| 140 | + |
| 141 | +``` |
| 142 | + |
| 143 | +## Change SCSS variables in the project |
| 144 | +By creating a new style file, such as: `ve-tree-var.scss`, write the following content： |
| 145 | + |
| 146 | +```JS |
| 147 | +/* Change theme color variable */ |
| 148 | +$--color-primary: #ea5404; |
| 149 | + |
| 150 | +/* Change the icon font path variable, required */ |
| 151 | +$--font-path: "~vue-easytree/src/assets/fonts"; |
| 152 | + |
| 153 | +@import "vue-easytree/src/assets/index.scss"; |
| 154 | +``` |
| 155 | +: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 vue-easytree is located. |
| 156 | + |
| 157 | +Then directly import the above style files in `main.js`： |
| 158 | +```JS |
| 159 | +import Vue from 'vue' |
| 160 | +import VueEasyTree from "vue-easytree"; |
| 161 | +import "./css/ve-tree-var.scss" |
| 162 | + |
| 163 | +Vue.use(VueEasyTree) |
| 164 | +``` |
| 165 | + |
| 166 | +## Other properties and methods |
| 167 | + |
| 168 | +**From [element-ui official document](https://element.eleme.cn/#/en-US/component/tree)**<br /> |
| 169 | +**When you need to use virtual scrolling, just add the `height` property, such as:** |
| 170 | +```html |
| 171 | +<vue-easy-tree :data="data" height="calc(100vh - 20px)" :props="defaultProps" @node-click="handleNodeClick"></vue-easy-tree> |
| 172 | +``` |
| 173 | + |
| 174 | +**[Quick view of examples and api](./element-ui-tree.md)** |
| 175 | + |
| 176 | + |
| 177 | +## License |
| 178 | + |
| 179 | +[MIT](http://www.opensource.org/licenses/mit-license.php) |
0 commit comments