vue element plus Virtualized Select 虚拟化选择器

TIP

这个组件目前在测试当中,如果在使用中发现任何漏洞和问题,请在 GitHub 中提交 issue 以便我们进行处理。

TIP

在 SSR 场景下,您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (例如: VitePress).

背景#

在某些使用情况下,单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担,从而造成性能问题。 为了更好的用户和开发者体验,我们决定添加此组件。

基础用法#

适用广泛的基础选择器

Please select

Please select

Please select

多选#

最基础的多选选择器

Please select

隐藏多余标签的多选#

默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。

use collapse-tags

Please select

use collapse-tags-tooltip

Please select

use max-collapse-tags

Please select

可过滤的多选#

当选项太多时,你可以使用 filterable 选项来启用过滤功能来找到所需的选项。

Please select

禁用选择器本身或选项#

您可以选择禁用 Select 或者 Select 中的某个选项。

Please select

Please select

给选项进行分组#

只要数据格式满足特定要求,我们就可以按照自己的意愿为选项进行分组。

Please select

自定义选项的渲染模板#

我们也可以通过自定义模板来渲染自己想要的选项内容。

Please select

一键清除#

我们可以同时清除所有选定的选项。此设定也适用于单选。

Please select

Please select

创建临时选项#

创建并选中未包含在初始选项中的条目。

通过使用 allow-create 属性,用户可以通过输入框创建新项目。 为了使 allow-create 正常工作, filterable 的值必须为 true

TIP

最好在使用 allow-create 属性的同时设置 :reserve-keyword="false"

Please select

Please select

set reserve-keyword false

Please select

远程搜索#

输入关键字以从远程服务器中查找数据。

从服务器搜索数据,输入关键字进行查找。为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-method。 remote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。

Please enter a keyword

使用 value-key 键属性#

当 options.value 是一个对象时,您应该为它设置一个唯一的标识名称

TIP

在 2.4.0 之前,value-key既用作所选对象的唯一值,也用作options中表示值的对应 key。 现在 value-key 仅作为所选对象的唯一值使用,选项中值的 key 是 props.value.

a0

自定义选项2.4.2#

当您的 options 格式不同于默认格式 您可以通过 props 属性自定义 options

Please select

自定义标签2.5.0#

您可以自定义标签。

将自定义的标签插入 el-select 的 slot 中即可。 collapse-tagscollapse-tags-tooltipmax-collapse-tags 在此模式下不生效.

SelectV2 属性#

属性名说明类型默认值
model-value / v-model绑定值string / number / boolean / object / array
options选项的数据源, value 的 key 和 label 可以通过 props自定义.array
props 2.4.2配置选项,具体看下表object
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
value-key作为 value 唯一标识的键名,绑定值为对象类型时必填stringvalue
size组件大小enum
clearable是否可以清空选项booleanfalse
clear-icon自定义清除图标string / objectCircleClose
collapse-tags多选时是否将选中值按文字的形式展示booleanfalse
multiple-limit多选时可被选择的最大数目。 当被设置为0时,可被选择的数目不设限。number0
name选择器的原生name属性string
effecttooltip 主题,内置了 dark / light 两种enum / stringlight
autocomplete自动完成选择输入stringoff
placeholderplaceholderstringPlease select
filterable是否可筛选booleanfalse
allow-create是否允许创建新条目, 当使用该属性时,filterable必须设置为truebooleanfalse
filter-method自定义筛选方法Function
loading是否从远程加载数据booleanfalse
loading-text从服务器加载数据时显示的文本,默认为“Loading”string
reserve-keyword筛选时,是否在选择选项后保留关键字booleantrue
no-match-text搜索条件无匹配时显示的文字,也可以使用 empty 插槽设置,默认是 “No matching data'”string
no-data-text当在没有数据时显示的文字,你同时可以使用empty插槽进行设置。stringNo Data
popper-class选择器下拉菜单的自定义类名string
popper-append-to-body deprecated是否将弹出框插入至 body 元素 当弹出框的位置出现问题时,你可以尝试将该属性设置为false。booleanfalse
teleported是否将下拉列表元素插入 append-to 指向的元素下booleantrue
persistent当下拉选择器未被激活并且persistent设置为false,选择器会被删除。booleantrue
popper-optionspopper.js parametersobjectrefer to popper.js doc{}
automatic-dropdown对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单booleanfalse
height下拉菜单的高度,每一个选项为34pxnumber274
item-height下拉项的高度number34
scrollbar-always-on是否总是展示滚动条booleanfalse
remote是否从服务器获取数据booleanfalse
remote-method当输入值发生变化时触发的函数。 它的参数就是当前的输入值。 当filterable设置为 true 时才会生效Function
validate-event是否触发表单验证booleantrue
placement下拉框出现的位置enumbottom-start
collapse-tags-tooltip 2.3.0当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 只有当 collapse-tags 设置为 true 时才会生效。booleanfalse
max-collapse-tags 2.3.0需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。number1
tag-type 2.5.0标签类型enuminfo
aria-label a11y 2.5.0等价于原生 input aria-label 属性string

props#

Attribute说明TypeDefault
value指定选项的值为选项对象的某个属性值stringvalue
label指定节点标签为节点对象的某个属性值stringlabel
options指定选项的子选项为选项对象的某个属性值stringoptions
disabled指定选项的禁用为选项对象的某个属性值stringdisabled

SelectV2 事件#

插槽名说明参数
change选中值发生变化时触发Function
visible-change下拉框出现/隐藏时触发Function
remove-tag多选模式下移除tag时触发Function
clear可清空的单选模式下用户点击清空按钮时触发Function
blur当选择器的输入框失去焦点时触发Function
focus当选择器的输入框获得焦点时触发Function

SelectV2 插槽#

名称详情
default自定义 Option 模板
empty自定义当选项为空时的内容
prefix输入框的前缀
tag 2.5.0select 组件自定义标签内容

Select Exposes#

方法描述类型
focus使选择器的输入框获取焦点Function
blur使选择器的输入框失去焦点,并隐藏下拉框Function

源代码#

组件 • 文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/612016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

真心建议,幼师姐妹刷到一定要存下啊

幼师姐妹还不知道&#xff1f;但凡早点发现这个好东西&#xff0c;我也不至于天天加班写各种报告了啊&#xff0c;真的写什么都行&#xff0c;什么总结&#xff0c;教案&#xff0c;评语&#xff0c;日报等等 都能写啊&#xff01;&#xff01;&#xff01;

2024年1月10日最热AI论文Top5:DebugBench、AI智能体对齐、开放域问答系统、谈判游戏、联邦学习

本文整理了今日发表在ArXiv上的AI论文中最热门的TOP5。 论文热度排序、论文标签、中文标题、推荐理由和论文摘要均由赛博马良平台&#xff08;saibomaliang.com&#xff09;上的智能体 「AI论文解读达人」 提供。 如需查看其他热门论文&#xff0c;欢迎移步 saibomaliang.com…

使用FFmpeg+EasyDarwin搭建音视频推拉流测试环境

1. 前言 在上一篇文章《使用VS2017在win10 x64上编译调试FFmpeg&#xff08;附源码和虚拟机下载&#xff09;》中&#xff0c;我们讲解了如何搭建FFmpeg源码编译和调试环境。 调试FFmpeg&#xff0c;还需要搭建流媒体服务器。流媒体服务器的作用是通过网络对外提供音视频服务…

前端插件库-VUE3 使用 JSEncrypt 插件

JSEncrypt 是一个用于在客户端进行加密的 JavaScript 库。它基于 RSA 加密算法&#xff0c;可以用于在浏览器中对数据进行加密和解密操作。 以下是使用 JSEncrypt 进行加密和解密的基本示例&#xff1a; 第一步&#xff1a;安装 JSEncrypt 首先&#xff0c;你需要引入 JSEn…

LeetCode 2696.删除子串后的字符串最小长度:栈

【LetMeFly】2696.删除子串后的字符串最小长度&#xff1a;栈 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-string-length-after-removing-substrings/ 给你一个仅由 大写 英文字符组成的字符串 s 。 你可以对此字符串执行一些操作&#xff0c;在每一步操…

export default 和exprot

1.默认导入和默认导出 语法: export default {需要输出的内容} 接收: import 成员变量的名字 from 文件夹的路径 案例&#xff1a; a.mjs文件夹下默认导出 export default{a:10,b:20,show(){console.log(123);} } 在b.mjs文件中用成员变量进行接收 import AA from &q…

vue上传文件时显示上传进度

要在Vue中显示文件上传进度&#xff0c;可以使用axios库来处理文件上传&#xff0c;并使用axios的onUploadProgress方法获取上传进度。 首先&#xff0c;确保你已经安装了axios库。可以使用npm或yarn安装&#xff0c;在终端中运行以下命令&#xff1a; npm install axios或者…

Vue 自定义仿word表单录入之单选按钮组件

因项目需要&#xff0c;要实现仿word方式录入数据&#xff0c;要实现鼠标经过时才显示编辑组件&#xff0c;预览及离开后则显示具体的文字。 鼠标经过时显示 正常显示及离开时显示 组件代码 <template ><div class"pager-input flex border-box full-width fl…

【Java】多pdf文件合并为一个.docx文件

当将多个 PDF 文件合并成单个 DOCX 文档时&#xff0c;利用 Java 中的 Apache PDFBox 和 Apache POI 库可以实现这一目标。这个过程可以分为几个步骤&#xff1a; 1. 导入所需的库 使用 Apache PDFBox 和 Apache POI 库来处理 PDF 和 DOCX 文件。你需要导入相关库&#xff0c…

Python快速排序

快速排序是一种常用的排序算法&#xff0c;它通过递归地将数组分割成较小的子数组&#xff0c;然后对这些子数组进行排序&#xff0c;最终将它们合并成一个有序的数组。具体步骤如下&#xff1a; 1. 选择一个基准元素&#xff0c;通常是数组中的第一个元素。 2. 将数组分成两部…

Arthas CPU 火焰图技术 简谈

1.基础命令 help 作用 查看命令帮助信息&#xff0c;可以查看当前 arthas 版本支持的指令&#xff0c;或者查看具体指令的使用说明。cat 作用 打印文件内容&#xff0c;和linux里的cat命令类似&#xff0c;如果没有写路径&#xff0c;则展示当前目录下的文件 使用参考 cat /t…

Linux离线安装MySQL(rpm)

目录 下载安装包安装MySQL检测安装结果服务启停MySQL用户设置 下载安装包 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 下载全量包如&#xff1a;(mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar) 解压&#xff1a;tar -xzvf mysql-8.1.0-1.el7.x86_64.…

web前端案例之抽奖

使用HTMLJavascript完成抽奖案例 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}</style></head><body><div id"container" onclic…

js中的Date对象常用方法总结

近期业务上涉及到很多与时间有关系的地方&#xff0c;写个总结。 这里写目录标题 日期的定义时间戳时间戳和一般时间的相互转换从日期中获取值日期之间的计算 日期的定义 首先&#xff0c;用js定义时间的方法&#xff0c;一共有四种&#xff1a; console.log(new Date()) //…

xinput1_4.dll缺失了怎么办?快速修复xinput1_4.dll文件的方法指南

在快速发展的数字时代&#xff0c;电子设备尤其是电脑成为了我们生活工作中必不可少的工具。然而&#xff0c;在使用过程中&#xff0c;我们可能会遇到各式各样的技术问题&#xff0c;其中一个常见问题是系统提示缺少 xinput1_4.dll文件。这个错误通常会在你尝试运行一个游戏或…

爬虫网易易盾滑块及轨迹算法案例:某乎

声明&#xff1a; 该文章为学习使用&#xff0c;严禁用于商业用途和非法用途&#xff0c;违者后果自负&#xff0c;由此产生的一切后果均与作者无关 一、滑块初步分析 js运行 atob(‘aHR0cHM6Ly93d3cuemhpaHUuY29tL3NpZ25pbg’) 拿到网址&#xff0c;浏览器打开网站&#xff0…

使用 STM32 和 DS18B20 温度传感器设计室内温度监测与报警系统

为设计室内温度监测与报警系统&#xff0c;我们将利用STM32微控制器和DS18B20数字温度传感器&#xff0c;以及蜂鸣器实现温度报警功能。在本文中&#xff0c;将介绍如何通过STM32微控制器读取DS18B20传感器的温度数据&#xff0c;并在超出设定范围时触发蜂鸣器报警。 1. 系统概…

档案统一管理的具体做法包括哪些?

档案统一管理工作&#xff0c;需要根据统管单位工作特点重建管理流程&#xff0c;优化和规范管理。档案统一管理的具体做法包括&#xff1a; 1. 设立档案管理部门或档案管理团队&#xff0c;负责统一管理机构的所有档案资料。 2. 建立档案管理制度和流程&#xff0c;明确档案的…

谈谈 UTF-8 标准和解码的实现

字符集编码的历史 ASCII码 ASCII 码诞生于上世纪 60 年代的美国&#xff0c;它将英文字符和二进制位之间的关系做了统一规定&#xff1a;将 128 个英文的字符映射到一个字节的后 7 位&#xff0c;最前面的一位统一规定为 0。因此 ASCII 码正好使用一个字节存储一个字符&#…

Vue-13、Vue深度监视

1、监视多级结构中某个属性的变化 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>watch深度监视</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm…