About the fact that I wrote a virtual tree component

Not much to say, you can watch the demo directly https://5kgy3l.csb.app/

 npm i virtualtree-vue2

 yarn add virtualtree-vue2

virtual tree

This component is developed for Vue2.x

Open source is not easy. If it helps you a little bit, start it for free. This will be the full motivation for my update and maintenance.

introduce

The virtual list is actually an implementation of on-demand display, that is, only the visible area is rendered.
A technique that does not render or partially renders data in non-visible areas, resulting in extremely high rendering performance.

After the baptism of tens of thousands of WebGl components, it still stands and is trustworthy.

Click to view demo via codesanbox

use

 import VirtualTree from "virtualtree-vue2";
import "virtualtree-vue2/lib/virtualtree-vue2.css";

Vue.use(VirtualTree);

 <virtual-tree
  :data="data"
  :props="props"
  @node-click="handleNodeClick"
  @checked="handleChecked"
  ref="tree"
>
</virtual-tree>

<script>
  export default {
    data() {
      return {
         props: {
            children: "TestChildren",
            label: "Label",
            key: "uuid",
          },
      }
    }
  }
</script>

Because the virtual tree needs to determine the area by scrolling the viewport, when initializing virtual-tree the DOM occupied must have a height, which can be set by the parent.

Slots can be defined for each row of data

 <virtual-tree
  :data="data"
  :props="props"
  @node-click="handleNodeClick"
  @checked="handleChecked"
>
  <template #default="{ text, parentName }">
    <div class="test-slot">{{ text }} {{ parentName }}</div>
  </template>
</virtual-tree>

The data of the current node will be injected into the default slot, parentName is an automatically generated associated parent field, a string similar to breadcrumbs

 全部 > 节点1 > 字节2

When you click on the corresponding node, a className of active will be added. You can set the style yourself to define the effect of clicking

 .treeitem_content_label.active {

}

API

handleChecked(obj, bool)

Check a piece of data, it will be automatically checked

• obj row data

• bool true: checked false: unchecked

   // eg:
  this.$refs.tree.handleChecked(row, true)

  handleExpanded(obj, bool)

  Expand or close a node. It will automatically expand or close the association

• obj row data

• bool true: expand false: close

   // eg:
  this.$refs.tree.handleExpanded(row, true)