JhVirtualSelect 虚拟滚动下拉框
优化下拉框数据渲染,避免下拉选项大时渲染卡顿。支持千万级数据展示。
Installation
$ npm install jh-virtual-select
;Vue;
基础单选
适用广泛的基础单选
{ return list: value: '' ; } { for let i = 1; i < 2000; i++ thislist; };
v-model
的值为当前被选中元素的 value
属性值。
有禁用选项
设置 list 选项的 disabled 为 true,即可禁用该选项。
thislist;
禁用状态
选择器不可用状态
设置组件的 disabled
属性为 true
即可禁用。
可清空选项
包含清空按钮,可将选择器清空为初始状态
为组件设置 clearable
属性,则可将选择器清空。
基础多选
适用性较广的基础多选
为组件设置 multiple
属性,则可将选择器变成多选。
- 注:此时
value
值选中结果会变成数组
自定义模板
可以自定义备选项
methods: { const div = document; divtextContent = `-自定义`; return div; }
通过 render
钩子传入备选项 dom 内容即可实现自定义模板功能。
分组
备选项进行分组展示
for let i = 0; i < 3; i++ const item = value: i label: '分组-' + i children: ; for let j = 0; j < 20; j++ itemchildren; thislist;
设置选择器的 group
属性为 true
,同时修改 data,添加 children
即可开启分组功能。
- 支持多选分组和单选分组
- 点击分组名可快速选中当前组/不选当前组
- 被禁用在备选项或组不会被处理
全选/全不选
多选时开启全选和全不选功能
添加 showbtn
属性即可开启全选/全不选功能。
- 必须为多选模式下,否者不生效
- 被禁用在备选项或组不会被处理
可搜索
可以利用搜索功能快速查找选项
设置 filterable
为 true
可实现模糊搜索。
Select Attributes
Select Events
change
选中项发生变化时触发
LOG
- 2016-06-25 增加激活样式