The reason for writing this component is:

  1. The Tree component in elementUI gets stuck at 1K +.
  2. Vue – based massive (20W +) tree plugin not found.

1. Why you’re stuck.

A brief analysis of why the lag (see the reference article for details) :

  1. ElementUI recursive implementation of tree, DOM large.
  2. Massive data will be dependent on collection, memory overhead, will be stuck, and even prompt insufficient memory browser crash.

2. Implementation scheme

  1. Flattening of tree data and DOM structure.
  2. The virtual long list controls the number of DOM renders
  3. Data is not relied upon for collection.
  4. Multiple data structures accelerate response (multipoint space for time).

1. The flattening of tree data and DOM structure, and the virtual long list control dom rendering quantity

See the reference article for details

Data is not dependent on collection, and a variety of data structures accelerate ringing

Not through props, but through functions.

/ / parent component < huge - tree ref = "huge - tree" > < / help - tree > axios. Get (` / static/json / ${count}. The json `). Then (({data}) = > {/ / note: Do not rely on the collection of data here, which will lead to a lag. this.$refs['huge-tree'].setData(data); }); <script> class BigData {_data = []; // Tree list = []; // Flat tree filterList = []; ListMap = {}; // this.big.list corresponds to the map to find the node quickly. filterTree = []; Tree} export default {data() {this.big = null; Return {count: 1, // For view updates, manually update computed through count because there is no dependency collection. Keyword: "', / / keywords isSearching: false, / / search itemHeigth: 27, / / the height of each startIndex: 0, / / render the beginning of the interval endIndex: ThrottleSrcoll: ", // throttleSrcoll: ", isOnlyInCheckedSearch: false,}; }, computed: {// Filter out hidden node unHiddenList() {return this.count? this.big.filterList.filter(i => ! i.isHidden) : []; }, // phantomHeight() {return this.unhiddenlist.length * this.itemheigth; }, renderList() { return this.unHiddenList.slice(this.startIndex, this.endIndex); }, }, created() { this.big = new BigData(); ThrottleSrcoll = throttle(this.setrenderrange, 80); // throttleSrcoll = throttle(this.setrenderrange, 80); This.debounceinput = debounce(this.init, 300); }, methods: { setData(data) { this.big._data = data; this.init('init'); }, //init: 1. Flat tree, 2. Organize list, 3. Init (op) {// op: init, restore, showCheckedOnly if (this.big._data.length === 0) return; if (op === 'init') { this.flatTree(this.big._data); this.big.list.forEach(node => (this.big.listMap[node.id] = node)); } this.initFilter(op); if (op === 'init' || op === 'restore') this.initExpand(); this.setCheckedKeys(this.big.checkedKeys); this.backToTop(); } / /... } } </script>Copy the code

3. Run the screenshot

Use 4.

NPM I huge-tree --save or yarn add huge-tree -dCopy the code
// demo.vue, <template> <div> <btm-huge-tree></btm-huge-tree> </div> </template> <script> import { HugeTree } from 'huge-tree' export  default { components: { 'btm-huge-tree': HugeTree } } </script>Copy the code

5. Use documentation

Github.com/bitmain-fro…

Refer to the article

zhuanlan.zhihu.com/p/55528376

The source code

Making: github.com/bitmain-fro…