├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── views
    │   ├── elTree.vue
    │   └── bTree.vue
    ├── App.vue
    ├── router.js
    ├── mixins
    │   └── treeTools.js
    ├── components
    │   ├── index.js
    │   ├── HelloWorld.vue
    │   └── vueBigTree.vue
    └── utils
    │   └── generateTreeData.js
├── babel.config.js
├── vue.config.js
├── .gitignore
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayZOU/vue-big-tree/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayZOU/vue-big-tree/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |         css: {
3 |                 extract: false
4 |         }
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import ElementUI from "element-ui";
 5 | 
 6 | import "element-ui/lib/theme-chalk/index.css";
 7 | 
 8 | Vue.config.productionTip = false;
 9 | 
10 | Vue.use(ElementUI);
11 | 
12 | new Vue({
13 |   router,
14 |   render: h => h(App)
15 | }).$mount("#app");
16 | 


--------------------------------------------------------------------------------
/src/views/elTree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="main">
 4 |       <el-tree :data="tree"></el-tree>
 5 |     </div>
 6 |     <p class="label">节点总数:{{ flattenTree.length }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import treeTools from "../mixins/treeTools";
12 | export default {
13 |   mixins: [treeTools]
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | #app {
 9 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   color: #2c3e50;
13 | }
14 | .main {
15 |   width: 500px;
16 |   margin: 20px;
17 | }
18 | .label {
19 |   width: 500px;
20 |   text-align: center;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import bTree from "./views/bTree.vue";
 4 | import elTree from "./views/elTree.vue";
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   mode: "history",
10 |   base: process.env.BASE_URL,
11 |   routes: [
12 |     {
13 |       path: "/b-tree",
14 |       name: "bTree",
15 |       component: bTree
16 |     },
17 |     {
18 |       path: "/el-tree",
19 |       name: "elTree",
20 |       component: elTree
21 |     }
22 |   ]
23 | });
24 | 


--------------------------------------------------------------------------------
/src/mixins/treeTools.js:
--------------------------------------------------------------------------------
 1 | import generateData from "../utils/generateTreeData";
 2 | export default {
 3 |   computed: {
 4 |     tree() {
 5 |       return generateData();
 6 |     },
 7 |     flattenTree() {
 8 |       const flatten = function(node) {
 9 |         let arr = [];
10 |         node.forEach(item => {
11 |           arr.push(item);
12 |           if (item.children) {
13 |             arr.push(...flatten(item.children));
14 |           }
15 |         });
16 |         return arr;
17 |       };
18 |       return flatten(this.tree);
19 |     }
20 |   }
21 | };
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-big-tree</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-big-tree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | import vueBigTree from './vueBigTree.vue';
 2 | 
 3 | // Vue 安裝 Plugin 時 ( Vue.use ) 會叫用 install 函式，在此時註冊元件
 4 | export function install(Vue) {
 5 |     if (install.installed) return;
 6 |     install.installed = true;
 7 |     Vue.component(vueBigTree.name, vueBigTree);
 8 | }
 9 | 
10 | // 建立 Plugin 物件
11 | const plugin = {
12 |     install,
13 | };
14 | 
15 | // 如果使用全域 Vue 物件 (例如 <script> 載入) 時直接使用 Plugin
16 | let GlobalVue = null;
17 | if (typeof window !== 'undefined') {
18 |     GlobalVue = window.Vue;
19 | } else if (typeof global !== 'undefined') {
20 |     GlobalVue = global.Vue;
21 | }
22 | if (GlobalVue) {
23 |     GlobalVue.use(plugin);
24 | }
25 | 
26 | // 在 Local 引入時要直接使用元件
27 | export default vueBigTree;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-big-tree
 2 | 一个可以用来渲染海量数据的Vue树形组件
 3 | 
 4 | ## Install
 5 | `npm i vue-big-tree --save`
 6 | 
 7 | ## Use
 8 | ```html
 9 |     <vueBigTree ref="bigTree" :tree="tree" :defaultExpand="true" :option="option">
10 |           <template v-slot="{ item, index }">
11 |             <div>{{ item.label }}</div>
12 |           </template>
13 |         </vueBigTree>
14 | ```
15 | 
16 | ## Attributes
17 | | 参数      |    说明 | 类型  | 可选  | 默认值  |
18 | | :-------- | --------:|-------:|-------:| :--: |
19 | | tree  | 数据源 |  Array   |  -   |  -   |
20 | | defaultExpand  | 是否默认展开 |  Boolean   |  true/false   |  false   |
21 | | option  | 虚拟树配置 |  Object   |  -   |  -   |
22 | | timeout  | 滚动节流 |  Number   |  -   |  17  |
23 | 
24 | ### option
25 | | 参数      |    说明 | 类型  | 可选  | 默认值  |
26 | | :-------- | --------:|-------:|-------:| :--: |
27 | | height  | 容器的高度 |  Number   |  -   |  500   |
28 | | itemHeight  | 单个节点的高度 |  Number   |  -   |  25   |
29 | 
30 | ### method
31 | #### 展开所有
32 | `this.$refs.bigTree.collapseAll()`
33 | #### 折叠所有
34 | `this.$refs.bigTree.expandAll()`


--------------------------------------------------------------------------------
/src/views/bTree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main">
 3 |     <vueBigTree ref="bigTree" :tree="tree" :defaultExpand="false" :option="option">
 4 |       <template v-slot="{ item, index }">
 5 |         <div>{{ item.label }}</div>
 6 |       </template>
 7 |     </vueBigTree>
 8 |     <div class="btn-group">
 9 |       <el-button @click="expandAll" class="btn" type="primary"
10 |         >展开所有</el-button
11 |       >
12 |       <el-button @click="collapseAll" class="btn" type="primary"
13 |         >折叠所有</el-button
14 |       >
15 |     </div>
16 |   </div>
17 | </template>
18 | <style>
19 | .btn-group {
20 |   margin-top: 20px;
21 | }
22 | </style>
23 | <script>
24 |   import vueBigTree from "../components/vueBigTree.vue";
25 | import treeTools from "../mixins/treeTools";
26 | 
27 | export default {
28 |   mixins: [treeTools],
29 |   data() {
30 |     return {
31 |       option: {
32 |         height: 500, //滚动容器的高度
33 |         itemHeight: 25 // 单个item的高度
34 |       }
35 |     };
36 |   },
37 |   components: {
38 |     vueBigTree
39 |   },
40 |   methods: {
41 |     collapseAll() {
42 |       this.$refs.bigTree.collapseAll();
43 |     },
44 |     expandAll() {
45 |       this.$refs.bigTree.expandAll();
46 |     }
47 |   }
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-big-tree",
 3 |   "version": "1.1.1",
 4 |   "scripts": {
 5 |     "serve": "vue-cli-service serve",
 6 |     "build": "vue-cli-service build",
 7 |     "build-bundle": "vue-cli-service build --target lib --name vue-big-tree src/components/index.js",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "main": "./dist/vue-big-tree.common",
11 |   "dependencies": {
12 |     "core-js": "^3.4.3",
13 |     "element-ui": "^2.12.0",
14 |     "vue": "^2.6.10",
15 |     "vue-big-tree": "^1.0.3",
16 |     "vue-router": "^3.0.3"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^4.1.0",
20 |     "@vue/cli-plugin-eslint": "^4.1.0",
21 |     "@vue/cli-service": "^4.1.0",
22 |     "babel-eslint": "^10.0.3",
23 |     "eslint": "^5.16.0",
24 |     "eslint-plugin-vue": "^5.0.0",
25 |     "vue-template-compiler": "^2.6.10"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "rules": {},
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     }
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions"
44 |   ],
45 |   "files": [
46 |     "./dist/*"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/src/utils/generateTreeData.js:
--------------------------------------------------------------------------------
 1 | const maxNode = 100000; //最大的节点数
 2 | const childNodesNumber = [2, 5]; //子节点数
 3 | const maxLevel = 3; //最大嵌套层级
 4 | const childRate = 0.4; //拥有子节点的概率
 5 | const label = "节点"; //节点label
 6 | 
 7 | let index = 0;
 8 | let data = [];
 9 | 
10 | const randomInteger = function(min, max) {
11 |   let result = min - 0.5 + Math.random() * (max - min + 1);
12 |   result = Math.round(result);
13 |   return result;
14 | };
15 | 
16 | const generateId = function() {
17 |   ++index;
18 |   return (
19 |     Math.random()
20 |       .toString()
21 |       .slice(3) * 1
22 |   );
23 | };
24 | const generateNode = function() {
25 |   const id = generateId();
26 |   return {
27 |     id: id,
28 |     label: `${label}_${id}`
29 |   };
30 | };
31 | const generateChild = function(tree, level = 1) {
32 |   if (index > maxNode - 1) return;
33 |   tree.children = [];
34 |   const childNumber = randomInteger(childNodesNumber[0], childNodesNumber[1]);
35 |   for (let i = 0; i < childNumber; i++) {
36 |     if (index > maxNode - 1) break;
37 |     let obj = generateNode();
38 | 
39 |     if (Math.random() < childRate && level < maxLevel) {
40 |       generateChild(obj, ++level);
41 |     }
42 |     tree.children.push(obj);
43 |   }
44 | };
45 | const generate = function() {
46 |   for (; index < maxNode; ) {
47 |     let obj = generateNode();
48 |     index < maxNode && generateChild(obj);
49 |     data.push(obj);
50 |   }
51 |   return data;
52 | };
53 | export default generate;
54 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,<br />
  6 |       check out the
  7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
  8 |         >vue-cli documentation</a
  9 |       >.
 10 |     </p>
 11 |     <h3>Installed CLI Plugins</h3>
 12 |     <ul>
 13 |       <li>
 14 |         <a
 15 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 16 |           target="_blank"
 17 |           rel="noopener"
 18 |           >babel</a
 19 |         >
 20 |       </li>
 21 |       <li>
 22 |         <a
 23 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 24 |           target="_blank"
 25 |           rel="noopener"
 26 |           >eslint</a
 27 |         >
 28 |       </li>
 29 |     </ul>
 30 |     <h3>Essential Links</h3>
 31 |     <ul>
 32 |       <li>
 33 |         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
 34 |       </li>
 35 |       <li>
 36 |         <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
 37 |           >Forum</a
 38 |         >
 39 |       </li>
 40 |       <li>
 41 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
 42 |           >Community Chat</a
 43 |         >
 44 |       </li>
 45 |       <li>
 46 |         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
 47 |           >Twitter</a
 48 |         >
 49 |       </li>
 50 |       <li>
 51 |         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
 52 |       </li>
 53 |     </ul>
 54 |     <h3>Ecosystem</h3>
 55 |     <ul>
 56 |       <li>
 57 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener"
 58 |           >vue-router</a
 59 |         >
 60 |       </li>
 61 |       <li>
 62 |         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
 63 |       </li>
 64 |       <li>
 65 |         <a
 66 |           href="https://github.com/vuejs/vue-devtools#vue-devtools"
 67 |           target="_blank"
 68 |           rel="noopener"
 69 |           >vue-devtools</a
 70 |         >
 71 |       </li>
 72 |       <li>
 73 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
 74 |           >vue-loader</a
 75 |         >
 76 |       </li>
 77 |       <li>
 78 |         <a
 79 |           href="https://github.com/vuejs/awesome-vue"
 80 |           target="_blank"
 81 |           rel="noopener"
 82 |           >awesome-vue</a
 83 |         >
 84 |       </li>
 85 |     </ul>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | export default {
 91 |   name: "HelloWorld",
 92 |   props: {
 93 |     msg: String
 94 |   }
 95 | };
 96 | </script>
 97 | 
 98 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 99 | <style scoped lang="less">
100 | h3 {
101 |   margin: 40px 0 0;
102 | }
103 | ul {
104 |   list-style-type: none;
105 |   padding: 0;
106 | }
107 | li {
108 |   display: inline-block;
109 |   margin: 0 10px;
110 | }
111 | a {
112 |   color: #42b983;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/components/vueBigTree.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="b-tree"
  4 |     ref="scroller"
  5 |     :style="{ height: option.height + 'px' }"
  6 |     @scroll="handleScroll"
  7 |   >
  8 |     <div class="b-tree__phantom" :style="{ height: contentHeight }"></div>
  9 |     <div
 10 |       class="b-tree__content"
 11 |       :style="{ transform: `translateY(${offset}px)` }"
 12 |     >
 13 |       <div
 14 |         v-for="(item, index) in visibleData"
 15 |         :key="item.id"
 16 |         class="b-tree__list-view"
 17 |         :style="{
 18 |           paddingLeft: 18 * (item.level - 1) + 'px',
 19 |           height: option.itemHeight + 'px'
 20 |         }"
 21 |       >
 22 |         <i
 23 |           :class="item.expand ? 'b-tree__expand' : 'b-tree__close'"
 24 |           @click="toggleExpand(item)"
 25 |           v-if="item.children && item.children.length"
 26 |         />
 27 |         <span v-else style="margin-right:5px"></span>
 28 |         <slot :item="item" :index="index"></slot>
 29 |       </div>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <style>
 35 | .b-tree {
 36 |   position: relative;
 37 |   overflow-y: scroll;
 38 | }
 39 | .b-tree__phantom {
 40 |   position: absolute;
 41 |   left: 0;
 42 |   top: 0;
 43 |   right: 0;
 44 |   z-index: -1;
 45 | }
 46 | .b-tree__content {
 47 |   position: absolute;
 48 |   left: 0;
 49 |   right: 0;
 50 |   top: 0;
 51 |   min-height: 100px;
 52 | }
 53 | .b-tree__list-view {
 54 |   display: flex;
 55 |   align-items: center;
 56 |   cursor: pointer;
 57 | }
 58 | .b-tree__content__item {
 59 |   padding: 5px;
 60 |   box-sizing: border-box;
 61 | 
 62 |   display: flex;
 63 |   justify-content: space-between;
 64 |   position: relative;
 65 |   align-items: center;
 66 |   cursor: pointer;
 67 | }
 68 | .b-tree__content__item:hover,
 69 | .b-tree__content__item__selected {
 70 |   background-color: #d7d7d7;
 71 | }
 72 | .b-tree__content__item__icon {
 73 |   position: absolute;
 74 |   left: 0;
 75 |   color: #c0c4cc;
 76 |   z-index: 10;
 77 | }
 78 | .b-tree__close {
 79 |   display: inline-block;
 80 |   width: 0;
 81 |   height: 0;
 82 |   overflow: hidden;
 83 |   font-size: 0;
 84 |   margin-right: 5px;
 85 |   border-width: 5px;
 86 |   border-color: transparent transparent transparent #c0c4cc;
 87 |   border-style: dashed dashed dashed solid;
 88 | }
 89 | .b-tree__expand {
 90 |   display: inline-block;
 91 |   width: 0;
 92 |   height: 0;
 93 |   overflow: hidden;
 94 |   font-size: 0;
 95 |   margin-right: 5px;
 96 |   border-width: 5px;
 97 |   border-color: #c0c4cc transparent transparent transparent;
 98 |   border-style: solid dashed dashed dashed;
 99 | }
100 | </style>
101 | <script>
102 |   let lastTime = 0;
103 | export default {
104 |   name: "vueBigTree",
105 |   props: {
106 |     tree: {
107 |       type: Array,
108 |       required: true,
109 |       default() {
110 |         return []
111 |       }
112 |     },
113 |     defaultExpand: {
114 |       type: Boolean,
115 |       required: false,
116 |       default: false
117 |     },
118 |     timeout: { //刷新频率
119 |       type: Number,
120 |       default: 17
121 |     },
122 |     option: {
123 |       // 配置对象
124 |       type: Object,
125 |       required: true,
126 |       default() {
127 |         return {
128 |           height: 500, //滚动容器的高度
129 |           itemHeight: 25 // 单个item的高度
130 |         }
131 |       }
132 |     }
133 |   },
134 |   data() {
135 |     return {
136 |       offset: 0, // translateY偏移量
137 |       contentHeight: "0px",
138 |       visibleData: []
139 |     };
140 |   },
141 |   computed: {
142 |     flattenTree() {
143 |       const flatten = function(
144 |         list,
145 |         childKey = "children",
146 |         level = 1,
147 |         parent = null,
148 |         defaultExpand = true
149 |       ) {
150 |         let arr = [];
151 |         list.forEach(item => {
152 |           item.level = level;
153 |           if (item.expand === undefined) {
154 |             item.expand = defaultExpand;
155 |           }
156 |           if (item.visible === undefined) {
157 |             item.visible = true;
158 |           }
159 |           if (!parent.visible || !parent.expand) {
160 |             item.visible = false;
161 |           }
162 |           item.parent = parent;
163 |           arr.push(item);
164 |           if (item[childKey]) {
165 |             arr.push(
166 |               ...flatten(
167 |                 item[childKey],
168 |                 childKey,
169 |                 level + 1,
170 |                 item,
171 |                 defaultExpand
172 |               )
173 |             );
174 |           }
175 |         });
176 |         return arr;
177 |       };
178 |       return flatten(this.tree, "children", 1, {
179 |         level: 0,
180 |         visible: true,
181 |         expand: true,
182 |         children: this.tree
183 |       });
184 |     },
185 |     visibleCount() {
186 |       return Math.floor(this.option.height / this.option.itemHeight);
187 |     }
188 |   },
189 |   mounted() {
190 |     this.updateView();
191 |   },
192 |   methods: {
193 |     updateView() {
194 |       this.getContentHeight();
195 |       this.$emit("update", this.tree);
196 |       this.handleScroll();
197 |     },
198 |     handleScroll() {
199 |       let currentTime = +new Date()
200 |       if(currentTime - lastTime > this.timeout) {
201 |         this.updateVisibleData(this.$refs.scroller.scrollTop);
202 |         lastTime = currentTime
203 |       }
204 |     },
205 |     updateVisibleData(scrollTop = 0) {
206 |       let start = Math.floor(scrollTop / this.option.itemHeight) - Math.floor(this.visibleCount / 2);
207 |       start = start < 0 ? 0 : start;
208 |       const end = start + this.visibleCount * 2;
209 |       const allVisibleData = (this.flattenTree || []).filter(
210 |         item => item.visible
211 |       );
212 |       this.visibleData = allVisibleData.slice(start, end);
213 |       this.offset = start * this.option.itemHeight;
214 |     },
215 | 
216 |     getContentHeight() {
217 |       this.contentHeight =
218 |         (this.flattenTree || []).filter(item => item.visible).length *
219 |           this.option.itemHeight +
220 |         "px";
221 |     },
222 | 
223 |     toggleExpand(item) {
224 |       const isExpand = item.expand;
225 |       if (isExpand) {
226 |         this.collapse(item, true); // 折叠
227 |       } else {
228 |         this.expand(item, true); // 展开
229 |       }
230 |       this.updateView();
231 |     },
232 | 
233 |     //展开节点
234 |     expand(item) {
235 |       item.expand = true;
236 |       this.recursionVisible(item.children, true);
237 |     },
238 |     //折叠节点
239 |     collapse(item) {
240 |       item.expand = false;
241 |       this.recursionVisible(item.children, false);
242 |     },
243 | 
244 |     //折叠所有
245 |     collapseAll(level = 1) {
246 |       this.flattenTree.forEach(item => {
247 |         item.expand = false;
248 |         if (item.level != level) {
249 |           item.visible = false;
250 |         }
251 |       });
252 |       this.updateView();
253 |     },
254 | 
255 |     //展开所有
256 |     expandAll() {
257 |       this.flattenTree.forEach(item => {
258 |         item.expand = true;
259 |         item.visible = true;
260 |       });
261 | 
262 |       this.updateView();
263 |     },
264 | 
265 |     //递归节点
266 |     recursionVisible(children, status) {
267 |       children.forEach(node => {
268 |         node.visible = status;
269 |         if (node.children) {
270 |           this.recursionVisible(node.children, status);
271 |         }
272 |       });
273 |     }
274 |   }
275 | };
276 | </script>
277 | 


--------------------------------------------------------------------------------