多的不说, 能够间接看演示 https://5kgy3l.csb.app/

npm i virtualtree-vue2
yarn add virtualtree-vue2

虚构树

此组件为Vue2.x开发

开源不易 如果对你有一点帮忙 点个收费的start吧 这将是我更新保护的全副能源

介绍

虚构列表其实是按需显示的一种实现，即只对可见区域进行渲染，
对非可见区域中的数据不渲染或局部渲染的技术，从而达到极高的渲染性能。

通过WebGl数万条构件洗礼残害仍然耸立不倒, 值得信赖.

点击通过codesanbox查看演示

应用

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>

因为虚构树须要通过滚动视口确定区域, 所以初始化时virtual-tree所占的DOM必须有高度, 这个高度能够是由父级设置的.

能够为每行数据定义插槽

<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>

默认插槽中会注入以后节点的数据, parentName是主动生成的一个关联父级字段, 相似面包屑这样的字符串

全副 > 节点1 > 字节2

点击对应节点的时候,会把增加一个active的className, 你能够本人设置款式来定义点击时的成果

.treeitem_content_label.active {}

API

handleChecked(obj, bool)

勾选某条数据, 会主动进行关联勾选

  • obj 行数据

  • bool true: 勾选 false: 勾销勾选

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

    handleExpanded(obj, bool)

    开展或敞开某条节点. 会主动进行关联开展或敞开

  • obj 行数据

  • bool true: 开展 false: 敞开

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