基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件el-select

2023-12-25 15:46:11

来自源组件中的 README.md

Select V2 虚拟列表选择器

基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件。

在线演示

在线演示

使用说明

npm i el-select-v2
npm i element-ui

  import Vue from 'vue';
  // 必须引入 element-ui
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import ElSelectV2 from 'el-select-v2';

  Vue.use(ElSelectV2);
<template>
  <el-select-v2 v-model="value" :options="options" />
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: '',
      };
    },
    created() {
      for (let i = 0; i < 10000; i++) {
        this.options.push({
          value: `value ${i + 1}`,
          label: `label ${i + 1}`,
        });
      }
    },
  };
</script>

示例代码

示例代码

Select Attributes

参数说明类型可选值默认值
value / v-model绑定值boolean / string / number
options列表数据array
value-keyvalue 键名stringvalue
label-keylabel 键名stringlabel
min-item-size每个选项的最小高度number34
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
size输入框尺寸stringmedium/small/mini
clearable是否可以清空选项booleanfalse
collapse-tags多选时是否将选中值按文字的形式展示booleanfalse
multiple-limit多选时用户最多可以选择的项目数,为 0 则不限制number0
nameselect input 的 name 属性string
autocompleteselect input 的 autocomplete 属性stringoff
placeholder占位符string请选择
filterable是否可搜索booleanfalse
allow-create是否允许用户创建新条目,需配合 filterable 使用booleanfalse
filter-method自定义搜索方法function
remote是否为远程搜索booleanfalse
remote-method远程搜索方法function
loading是否正在从远程获取数据booleanfalse
loading-text远程加载时显示的文字string加载中
no-match-text搜索条件无匹配时显示的文字,也可以使用 slot="empty" 设置string无匹配数据
no-data-text选项为空时显示的文字,也可以使用 slot="empty" 设置string无数据
popper-classSelect 下拉框的类名string
reserve-keyword多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词booleanfalse
default-first-option在输入框按下回车,选择第一个匹配项。需配合 filterableremote 使用booleanfalse
popper-append-to-body是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 falsebooleantrue
automatic-dropdown对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单booleanfalse

Select Events

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

Select Slots

name说明
自定义模板,参数为 { item }
prefixSelect 组件头部内容
empty无选项时的列表

Options

参数说明类型可选值默认值
value选项的值string/number/object
label选项的标签,若不设置则默认与 value 相同string/number
disabled是否禁用该选项booleanfalse

Methods

方法名说明参数
focus使 input 获取焦点
blur使 input 失去焦点,并隐藏下拉框

文章来源:https://blog.csdn.net/qq_37899792/article/details/135199199
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。