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 |
在指定节点后添子节点(未实现) |
未知 |