v-tree-scroll

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使用)