ThSelectV2虚拟列表选择器

在下拉列表数据量过大时使用,解决浏览器渲染dom过多造成卡顿性能问题(支持万行数据)

依赖说明

element-ui

效果预览

基本使用

<template>
  <div>
    <th-select-v2 v-model="select" :options="options" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      select: '',
      options: [
        { label: '值1', value: 1, disabled: true },
        { label: '值2', value: 2 },
        { label: '值3', value: 3 },
        { label: '值4', value: 4 },
        { label: '值5', value: 5 }
      ]
    }
  }
}
</script>

Attributes

参数	说明	类型	可选	默认值
value	绑定值	string/number	--	--
options	选项,属性参考下面#options	array	--	--
disabled	是否禁用	boolean	--	false
size	输入框尺寸	string	medium/small/mini	--
placeholder	占位符	String	--	请选择
clearable	是否可以清空选项	boolean	--	false
popperAppendToBody	是否将弹出框插入至 body 元素	boolean	--	false
filterable	开启搜索	boolean	--	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用	boolean	--	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	boolean	--	false

Options

参数	说明	默认值
value	属性值	--
label	显示字段	--
disabled	是否禁用	false

Events

参数	说明	回调参数
change	选中值发生变化时触发	目前的选中值
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
clear	可清空的单选模式下用户点击清空按钮时触发	--
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 获得焦点时触发	(event: Event)