JhVirtualSelect 虚拟滚动下拉框

优化下拉框数据渲染，避免下拉选项大时渲染卡顿。支持千万级数据展示。

Installation

$ npm install jh-virtual-select

import JhVirtualSelect from 'jh-virtual-select';
Vue.use(JhVirtualSelect);

基础单选

适用广泛的基础单选

<jh-virtual-select :data='list' v-model="value" />

export default {
	data() {
		return {
			list: [],
			value: '',
		};
	},
	mounted() {
		for (let i = 1; i < 2000; i++) {
			this.list.push({
				value: i,
				label: '用户' + i,
			});
		}
	},
};

v-model 的值为当前被选中元素的 value 属性值。

有禁用选项

设置 list 选项的 disabled 为 true,即可禁用该选项。

this.list.push({
	value: i,
	disabled: true,
	label: '用户' + i,
});

禁用状态

选择器不可用状态

<jh-virtual-select :data='list' v-model="value" disabled />

设置组件的 disabled 属性为 true 即可禁用。

可清空选项

包含清空按钮，可将选择器清空为初始状态

<jh-virtual-select :data='list' v-model="value" clearable />

为组件设置 clearable 属性，则可将选择器清空。

基础多选

适用性较广的基础多选

<jh-virtual-select :data='list' v-model="value" multiple />

为组件设置 multiple 属性，则可将选择器变成多选。

• 注：此时 value 值选中结果会变成数组

自定义模板

可以自定义备选项

<jh-virtual-select :data='list' v-model="value" :render="render" />

methods:{
    render(data) {
        const div = document.createElement('div');
        div.textContent = `${data.label}-自定义`;
        return div;
    },
}

通过 render 钩子传入备选项 dom 内容即可实现自定义模板功能。

分组

备选项进行分组展示

<jh-virtual-select :data='list' v-model="value" group />

for (let i = 0; i < 3; i++) {
	const item = {
		value: i,
		label: '分组-' + i,
		children: [],
	};
	for (let j = 0; j < 20; j++) {
		item.children.push({
			value: j,
			label: '用户-' + j,
		});
	}
	this.list.push(item);
}

设置选择器的 group 属性为 true，同时修改 data，添加 children 即可开启分组功能。

• 支持多选分组和单选分组
• 点击分组名可快速选中当前组/不选当前组
• 被禁用在备选项或组不会被处理

全选/全不选

多选时开启全选和全不选功能

<jh-virtual-select :data='list' v-model="value" showbtn multiple />

添加 showbtn 属性即可开启全选/全不选功能。

• 必须为多选模式下，否者不生效
• 被禁用在备选项或组不会被处理

可搜索

可以利用搜索功能快速查找选项

<jh-virtual-select :data='list' v-model="value" filterable />

设置 filterable 为 true 可实现模糊搜索。

Select Attributes

Select Events

• change 选中项发生变化时触发

LOG

• 2016-06-25 增加激活样式