v-virtual

Links

• 虚拟列表文档
• 树形虚拟列表文档

install

 $ npm install v-virtual -S

Quick Start

import Vue from 'vue';
import Vitual from 'v-virtual';

Vue.use(Virtual)

// or
import {
  VirtualList,
  VitrualTree,
} from 'v-virtual'

Vue.component(VirtualList.name, VirtualList)
Vue.component(VitrualTree.name, VitrualTree)

virtual-list API

virtual-list: props

属性	说明	类型	默认值
itemCount	列表总长度	Number	null
overscanCount	缓冲区数量(最小为 1)	Number	1
estimatedItemHeight	预估高度	Number	30
useWindow	是否使用 window 作为滚动参考	Boolean	false
scrollableTarget	自定义滚动参考元素	String	undefined
custom	item根元素由外部提供	Boolean	false
hasMore	是否无限加载	Boolean	false

virtual-list: events

事件名	说明	返回值
on-scroll	滚动时触发	距离顶部的距离
on-load-more	滚动到底部时触发	无

virtual-list: slots

插槽名称	说明	参数
loading	无限滚动加载时触发	无
ended	数据全部加载完毕时触发	无
nodata	无数据时触发	无

virtual-list: methods

方法名	说明	参数
无

virtual-tree API

virtual-tree: props

属性	说明	类型	默认值
data	数据源	Array	[]
estimatedItemHeight	预估高度(虚拟列表属性)	Number	30
lazy	是否异步加载子数据	Boolean	false
nodeKey	每个树节点用来作为唯一标识的属性 整棵树应该是唯一的	String	无
childrenKey	定义子节点键	String	children
showKey	展示的键	String	title
indent	相邻级节点间的水平缩进, 单位为像素	Number	20
showCheckbox	是否展示多选框	Boolean	false
checkStrictly	在显示复选框的情况下, 是否严格的遵循 父子不互相关联的做法	滚动时触发	距离顶部的距离
multiple	是否多选(选择内容非多选框)	Boolean	false

virtual-tree: events

事件名	说明	返回值
on-loading	异步加载子节点	Function(请求后需添加的数据, 格式应为 Array)
on-selected	节点点击事件	1. node(Object): 当前点击项 2. data(Array): 当前选中的节点
on-checked	节点勾选✔事件	1. node(Object): 当前点击项 2. data(Array): 当前选中的节点
on-loaded-checked	节点下拉子节点选中事件	1. node(Object): 当前下拉项 2. data(Array): 添加的子节点
on-toggle-expand	节点下拉事件	1. node(Object): 当前下拉节点数据 2. status(Boolean): 节点状态

virtual-tree: slots

插槽名称	说明	参数
loading	无限滚动加载时的插槽(来自虚拟列表的插槽)	无
ended	数据全部加载完毕时的插槽(来自虚拟列表的插槽)	无
nodata	无数据时的插槽(来自虚拟列表的插槽)	无
arrow	树形节点箭头的插槽	1. open(Boolean): 当前箭头状态
kids-loading	异步子节点加载时的插槽	无
无	节点内容插槽	1. data(Object): 该节点信息

virtual-tree: methods

方法名	说明	参数
updateData	初始化或添加数据时调用	(初始化|需添加)数据
getSelected	获取已选中数据(返回 Set 对象)	无
getChecked	获取已勾选✔数据(返回 Set 对象)	无
getImmediated	获取半勾选✔数据(返回 Set 对象)	无
clearSelected	清空已选中数据	无
clearChecked	清空已勾选的数据(同时清空半勾选的数据)	无
setCheckedNodes	设置勾选的节点(未实现)	未知
setSelectedNodes	设置勾选的节点(需设置 nodeKey)(未实现)	未知
setCheckedNodes	设置选中的数据(需设置 nodeKey)(未实现)	未知
removeNode	删除指定的节点(未实现)	未知
removeNodeKey	删除指定节点(需设置 nodeKey)(未实现)	未知
append	为指定节点添加子节点(未实现)	未知
insertBefore	在指定节点前添子节点(未实现)	未知
insertAfter	在指定节点后添子节点(未实现)	未知