vue element plus Select 选择器

news/2024/5/26 20:33:07/文章来源:https://blog.csdn.net/m0_72196169/article/details/135514684

当选项过多时,使用下拉菜单展示并选择内容。

TIP

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

基础用法#

适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值

Select

Select

Select

有禁用选项#

在 el-option 中,设定 disabled 值为 true,即可禁用该选项

Select

禁用状态#

禁用整个选择器组件

为 el-select 设置 disabled属性,则整个选择器不可用。

Select

可清空单选#

您可以使用清除图标来清除选择。

为 el-select 设置 clearable 属性,则可将选择器清空。 需要注意的是,clearable 属性仅适用于单选。

Select

基础多选#

多选选择器使用 tag 组件来展示已选中的选项。

为 el-select 设置 multiple 属性即可启用多选, 此时 v-model 的值为当前选中值所组成的数组。 默认情况下选中值会以 Tag 组件的形式展现, 你也可以设置 collapse-tags 属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。

default

Select

use collapse-tags

Select

use collapse-tags-tooltip

Select

use max-collapse-tags

Select

自定义模板#

你可以自定义如何来渲染每一个选项。

将自定义的 HTML 模板插入 el-option 的 slot 中即可。

Select

自定义下拉菜单的头部2.4.3#

您可以自定义下拉菜单的头部。

使用slot 自定义内容

Select

自定义下拉菜单的底部2.4.3#

您可以自定义下拉菜单的底部。

使用slot 自定义内容

Select

将选项进行分组#

你可以为选项进行分组来区分不同的选项

使用 el-option-group 对备选项进行分组,它的 label 属性为分组名

Select

筛选选项#

可以利用筛选功能快速查找选项。

el-select添加filterable属性即可启用搜索功能。 默认情况下,Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑,可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function,它会在输入值发生变化时调用,参数为当前输入值。

Select

远程搜索#

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

从服务器搜索数据,输入关键字进行查找。为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-method。 remote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。 需要注意的是,如果 el-option 是通过 v-for 指令渲染出来的,此时需要为 el-option 添加 key 属性, 且其值需具有唯一性,比如这个例子中的 item.value

default

Please enter a keyword

use remote-show-suffix

Please enter a keyword

创建新的选项#

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

通过使用 allow-create 属性,用户可以通过输入框创建新项目。 为了使 allow-create 正常工作, filterable 的值必须为 true。 本例还使用了 default-first-option 属性, 在该属性为 true 的情况下,按下回车就可以选中当前选项列表中的第一个选项,无需使用鼠标或键盘方向键进行定位。

Choose tags for your article

使用值键 value-key 属性#

如果 Select 的绑定值为对象类型,请务必指定 value-key 作为它的唯一性标识。

通过使用 value-key 属性,可以正确处理带有重复label的数据。 这样虽然label 是重复的,但任可通过 id 来确认唯一性。

Select

selected option's description: no select

自定义标签2.5.0#

您可以自定义标签。

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

Select API#

Select Attributes#

属性名说明类型Default
model-value / v-model选中项绑定值string / number / boolean / object / array
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
value-key作为 value 唯一标识的键名,绑定值为对象类型时必填stringvalue
size输入框尺寸enum
clearable是否可以清空选项booleanfalse
collapse-tags多选时是否将选中值按文字的形式展示booleanfalse
collapse-tags-tooltip 2.3.0当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 要使用此属性,collapse-tags属性必须设定为 truebooleanfalse
multiple-limitmultiple 属性设置为 true 时,代表多选场景下用户最多可以选择的项目数, 为 0 则不限制number0
nameSelect 输入框的原生 name 属性string
effecttooltip 主题,内置了 dark / light 两种enum / stringlight
autocompleteSelect 输入框的原生 autocomplete 属性stringoff
placeholder占位符,默认为“Select”string
filterableSelect 组件是否可筛选booleanfalse
allow-create是否允许用户创建新条目, 只有当 filterable 设置为 true 时才会生效。booleanfalse
filter-method自定义筛选方法Function
remote其中的选项是否从服务器远程加载booleanfalse
remote-method自定义远程搜索方法Function
remote-show-suffix远程搜索方法显示后缀图标booleanfalse
loading是否正在从远程获取数据booleanfalse
loading-text从服务器加载数据时显示的文本,默认为“Loading”string
no-match-text搜索条件无匹配时显示的文字,也可以使用 empty 插槽设置,默认是 “No matching data'”string
no-data-text无选项时显示的文字,也可以使用 empty 插槽设置自定义内容,默认是 “No data”string
popper-class选择器下拉菜单的自定义类名string''
reserve-keywordmultiplefilterable被设置为 true 时,是否在选中一个选项后保留当前的搜索关键词booleantrue
default-first-option是否在输入框按下回车时,选择第一个匹配项。 需配合 filterableremote 使用booleanfalse
teleported是否将下拉列表插入至 body 元素booleantrue
persistent当下拉选择器未被激活并且persistent设置为false,选择器会被删除。booleantrue
automatic-dropdown对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单booleanfalse
clear-icon自定义清除图标string / objectCircleClose
fit-input-width下拉框的宽度是否与输入框相同booleanfalse
suffix-icon自定义后缀图标组件string / objectArrowDown
suffix-transition deprecated下拉菜单显示/消失时后缀图标的动画booleantrue
tag-type标签类型enuminfo
validate-event是否触发表单验证booleantrue
placement 2.2.17下拉框出现的位置enumbottom-start
max-collapse-tags 2.3.0需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。number1
popper-optionspopper.js 参数objectrefer to popper.js doc{}
aria-label a11y等价于原生 input aria-label 属性string

WARNING

suffix-transition 已被 弃用, 并 将会 在2.4.0中删除, 请使用覆盖样式方案。

Select Events#

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

Select Slots#

插槽名说明子标签
defaultoption 组件列表Option Group / Option
header 2.4.3下拉列表顶部的内容
footer 2.4.3下拉列表底部的内容
prefixSelect 组件头部内容
empty无选项时的列表
tag 2.5.0select 组件自定义标签内容

Select Exposes#

Method说明类型
focus使选择器的输入框获取焦点Function
blur使选择器的输入框失去焦点,并隐藏下拉框Function

Option Group API#

Option Group Attributes#

插槽名说明TypeDefault
label分组的名称string
disabled是否将该分组下所有选项置为禁用booleanfalse

Option Group Slots#

属性名说明Subtags
default自定义默认内容Option

Option API#

Option Attributes#

插槽名说明TypeDefault
value选项的值string / number / boolean / object
label选项的标签,若不设置则默认与value相同string / number
disabled是否禁用该选项booleanfalse

Option Slots#

Name说明
default默认插槽内容

源代码#

组件 • 文档

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

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

相关文章

【Web】浅聊XStream反序列化本源之恶意动态代理注入

目录 简介 原理 复现 具体分析之前 我们反序列化了个什么&#xff1f; XStream反序列化的朴素通识 具体分析 第一步&#xff1a;unmarshal解组 第二步&#xff1a;readClassType获取动态代理类的Class对象 第三步&#xff1a;调用convertAnother对动态代理类进行实例…

十六、接口隔离原则、反射、依赖注入

接口隔离原则、反射、特性、依赖注入 接口隔离原则 客户端不应该依赖它不需要的接口&#xff1b;一个类对另一个类的依赖应该建立在最小的接口上。 五种原则当中的i 上一章中的接口&#xff0c;即契约。 契约就是在说两件事&#xff0c;甲方说自己不会多要&#xff0c;乙方会在…

AWS 入门实践-远程访问AWS EC2 Linux虚拟机

远程访问AWS EC2 Linux虚拟机是AWS云计算服务中的一个基本且重要的技能。本指南旨在为初学者提供一系列步骤&#xff0c;以便成功地设置并远程访问他们的EC2 Linux实例。包括如何上传下载文件、如何ssh远程登录EC2虚拟机。 一、创建一个AWS EC2 Linux 虚拟机 创建一个Amazon…

HBuilder发行微信小程序

首先需要完善mainifest.json中的基本配置 这个需要组测dcloud才可以获取&#xff0c;注册后点击重新获取就可以。 然后发行前还需要完成dcloud的信息&#xff0c;这个他会给你网址 点击连接完成信息填写就可以了 然后就可以发行了。 发行成功后会自动跳转微信小程序&#xff…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的木材表面缺陷检测系统(深度学习+Python代码+UI界面+训练数据集)

摘要&#xff1a;开发高效的木材表面缺陷检测系统对于提升木材加工行业的质量控制和生产效率至关重要。本篇博客详细介绍了如何运用深度学习技术构建一个木材表面缺陷检测系统&#xff0c;并提供了完整的实现代码。该系统采用了强大的YOLOv8算法&#xff0c;并对YOLOv7、YOLOv6…

LeetCode101题:对称二叉树(python3)

对称二叉树定义&#xff1a; 对于树中 任意两个对称节点 L 和 R &#xff0c;一定有&#xff1a; L.val R.val &#xff1a;即此两对称节点值相等。 L.left.val R.right.val &#xff1a;即 L的 左子节点 和 R 的 右子节点 对称。 L.right.val R.left.val &#xff1a;即 L…

微服务之商城系统

文章目录 一、商城系统建立之前的一些配置1、nacos2、Mysql3、consul【暂时不使用consul注册服务】这个可以跳过4、redis 二、grpc环境搭建三、微服务架构使用的protobuf1、查看proto的版本号2、安装protoc-gen-go和protoc-gen-go-grpc3、生成protobuff以及grpc的文件 一、商城…

EMQX+InfluxDB+Grafana 构建物联网可视化平台

EMQXInfluxDBGrafana 构建物联网可视化平台 本文以常见物联网使用场景为例&#xff0c;介绍了如何利用 EMQ X MQTT 服务器 InfluxDB Grafana 构建物联网数据可视化平台&#xff0c;将物联网设备上传的时序数据便捷地展现出来。 在物联网项目中接入平台的设备数据和数据存储…

Hadoop生态选择(一)

一、项目框架 1.1技术选型 技术选型主要考虑因素:维护成本、总成本预算、数据量大小、业务需求、行业内经验、技术成熟度。 数据采集传输:Flume&#xff0c;Kafka&#xff0c;DataX&#xff0c;Maxwell&#xff0c;Sqoop&#xff0c;Logstash数据存储:MySQL&#xff0c;HDFS…

设计模式-行为型模式-迭代器模式

迭代器模式&#xff08;Iterator&#xff09;&#xff0c;提供一种方法顺序访问一个聚合对象中各个元素&#xff0c;而又不暴露该对象的内部表示。[DP] 首先&#xff0c;定义一个接口Iterator&#xff0c;它包含了遍历聚合对象所需的方法&#xff1a; public interface Iterato…

Linux Docker安装redis缓存数据库

文章目录 一、查找Redis镜像二、拉取redis镜像三、创建数据目录和配置文件四、创建redis容器 一、查找Redis镜像 首先到docker镜像仓库下载redis镜像。地址&#xff1a;https://hub.docker.com/搜索redis&#xff0c;如下&#xff1a;找到对应想要下载的版本&#xff1a; 二、…

openAI key 与ChatGPTPlus的关系,如何升级ChatGPTPLus

一、前言 先详细介绍一下Plus会员和Open API之间的区别&#xff1a; 实际上&#xff0c;这两者是相互独立的。举例来说&#xff0c;虽然您开通了Plus会员&#xff0c;并不意味着您就可以使用4.0版本的API。尽管这两个账户可以是同一个&#xff0c;但它们是完全独立的平台。 …

Day15 面向对象进阶——接Day14

Day15 面向对象进阶——接Day14 文章目录 Day15 面向对象进阶——接Day14一、访问修饰符二、Object三、深入String的equals()方法四、final 一、访问修饰符 1、含义&#xff1a;修饰类、方法、属性&#xff0c;定义使用的范围 2、经验&#xff1a; 2.1.属性一般使用private修…

关于安卓ZXing条码识别(二)适配竖屏

背景 不知道如何引入源码的&#xff0c;请看我第一篇文章&#xff0c;安卓源码引入 第一篇文章&#xff0c;粗略讲解了如何引入zxing到安卓的源码中&#xff0c;但是默认是横屏识别。 本文内容&#xff0c;就是如何进行竖屏识别。 环境 win10 as4 jdk8 感谢 博客 实现 …

离散化算法,以Acwing802.区间和为例子(C++实现)

目录 1.例题2.算法实现思路3.代码 1.例题 假定有一个无限长的数轴&#xff0c;数轴上每个坐标上的数都是 0现在&#xff0c;我们首先进行 n 次操作&#xff0c;每次操作将某一位置 x 上的数加 c接下来&#xff0c;进行 m 次询问&#xff0c;每个询问包含两个整数 l 和 r&#…

数学建模【对粒子群算法中惯性权重和学习因子的改进】

一、改进原因 这是前面 数学建模【粒子群算法】 中的一部分&#xff0c;这里提到了w存在的一些问题&#xff0c;那么本篇介绍一些方法对w和因子进行一些改进&#xff0c;提高粒子群算法的效率和准确度。 二、改进方法 1.线性递减惯性权重 惯性权重w体现的是粒子继承先前的速度…

Linux:kubernetes(k8s)pod的基础操作(6)

Linux&#xff1a;kubernetes&#xff08;k8s&#xff09;允许在任意节点使用kubectl命令&#xff08;5&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/136460090?spm1001.2014.3001.5501 我在前两张进行了基础环境的一系列搭建&#xff0c;现在就正…

LeetCode 189.轮转数组(三种方法解决)

文章目录 题目暴力求解空间换时间三段逆置总结 题目 LeetCode 189.轮转数组 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5…

蓝桥杯真题讲解:三国游戏(贪心)

蓝桥杯真题讲解&#xff1a;三国游戏&#xff08;贪心&#xff09; 一、视频讲解二、正解代码 一、视频讲解 蓝桥杯真题讲解&#xff1a;三国游戏&#xff08;贪心&#xff09; 二、正解代码 //三国游戏&#xff1a;贪心 #include<bits/stdc.h> #define int long lon…

Mysql 死锁案例2-间隙锁与意向插入锁冲突

死锁复现 CREATE TABLE t (id int(11) NOT NULL,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),KEY c (c) ) ENGINEInnoDB DEFAULT CHARSETutf8;/*Data for the table t */insert into t(id,c,d) values (0,0,0),(5,5,5),(10,10,10) 事务1事务2T1START …