jh-virtual-select

虚拟滚动选择器,支持大数据渲染和分组显示

Usage no npm install needed!

<script type="module">
  import jhVirtualSelect from 'https://cdn.skypack.dev/jh-virtual-select';
</script>

README

JhVirtualSelect 虚拟滚动下拉框

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

Installation

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

基础单选

适用广泛的基础单选

demo

<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 属性值。

有禁用选项

demo

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

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

禁用状态

选择器不可用状态

demo

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

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

可清空选项

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

demo

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

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

基础多选

适用性较广的基础多选

demo

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

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

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

自定义模板

可以自定义备选项

demo

<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 内容即可实现自定义模板功能。

分组

备选项进行分组展示

demo

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

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

全选/全不选

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

demo

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

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

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

可搜索

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

demo

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

设置 filterabletrue 可实现模糊搜索。

Select Attributes

Select Events

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

LOG

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