v-tree-scroll

一个虚拟滚动树组件。针对数据量太大会造成渲染 dom 太多，造成页面卡顿，虚拟列表应运而生，而开发过程中还有一种树的结构形式，所以制作了虚拟滚动树，解决 dom 节点过多造成的卡顿。

使用步骤

# 安装组件
npm i v-tree-scroll -S

# 引入组件
import  vTreeScroll  from 'v-tree-scroll'

Vue.use(vTreeScroll)

# 使用
<vTreeScroll  :data="totalList" />

效果

属性

| 属性名 | 默认值(类型) | 备注 | | ------------------ | ---------------------------------------------: | :--------------: | | lines | 20(Number) | 显示默认行数 | | lineHeight | 30(Number) | 默认每行高 | | nodeKey | id(String) | key | | props | { label: 'name', children: 'children' }(Object) | 默认数据级联结构 | | filterNodeMethod | Null(Function) | 默认过滤函数 | | defaultExpandAll | false(Boolean) | 是否默认展开 | | showCheckbox | true (Boolean) | 是否显示选择框 | | checkStrictly | false (Boolean) | 是否父子级不关联 | | defaultCheckedKeys | [](Array) | 默认选中节点 | | filterNodeMethod | Null(Function) | 默认过滤函数 |

方法

| 方法名 | 备注 | | ------------------ |:--------------: | | doLayout() | 强制刷新布局 | | getNode(key) | 获取指定节点 | | getCheckedNodes(half) | 返回选中节点(half是否返回半选) | | getCheckedKeys(half) | 返回选中节点key(half是否返回半选) | | setCheckedKeys(keys, leafOnly) | 设置节点选中(keys 设置的节点key数组;leafOnly 只是改变状态不涉及逻辑) | | clear() | 清空选中 | | filter(value) | 过滤数据(需要配合filterNodeMethod使用) |