0.0.9 • Published 2 years ago

virtualized-select v0.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

VirtualizedSelect

Vue2.x component for virtualized select

使用VxeTable的虚拟列表实现的虚拟下拉框,近似实现Element-Select功能

Install

npm install virtualized-select

Update

更新日志

Usage

import VirtualizedSelect from 'virtualized-select'
import 'virtualized-select/dist/virtualized-select.css'

Vue.use(VirtualizedSelect)

Example

<template>
  <div>
    <virtualized-select
      v-model="value"
      :options="list"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      list: new Array(10000 * 5).fill().map((_, index) => ({
        label: index.toString(),
        value: index
      })),
      // 更推荐如下写法,使用Object.freeze冻结数据,因为大多数情况下,下拉列表并不需要响应式
      // 如果需要修改原始数据,可以直接赋值修改
      freezeList: Object.freeze(new Array(10000 * 5).fill().map((_, index) => ({
        label: index.toString(),
        value: index
      })))
    }
  }
}
</script>

Performance

可自行加载 src/assets 下的火焰图进行对比

冻结前 冻结前

冻结后 冻结后

TODO

  • size
  • 支持创建不存在的值
  • 支持对象做值,类似el-select传入value-key
0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago