# jh-virtual-select

**Repository Path**: wang_changtan_fs/jh-virtual-select

## Basic Information

- **Project Name**: jh-virtual-select
- **Description**: 虚拟滚动下拉框
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-10-13
- **Last Updated**: 2022-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JhVirtualSelect 虚拟滚动下拉框

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

## Installation

```bash
$ npm install jh-virtual-select
```

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

## 基础单选

_适用广泛的基础单选_

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/01.png)

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

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

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

## 有禁用选项

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/02.png)

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

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

## 禁用状态

_选择器不可用状态_

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/03.png)

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

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

## 可清空选项

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

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/04.png)

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

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

## 基础多选

_适用性较广的基础多选_

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/05.png)

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

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

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

## 自定义模板

_可以自定义备选项_

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/06.png)

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

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

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

## 分组

_备选项进行分组展示_

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/07.png)

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

```js
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` 即可开启分组功能。

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

## 全选/全不选

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

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/08.png)

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

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

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

## 可搜索

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

![demo](https://gitee.com/zhkumsg/jh-virtual-select/raw/master/demo/09.png)

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

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

## Select Attributes

## Select Events

-   `change` 选中项发生变化时触发

## LOG

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