【区分vue2和vue3下的element UI Select 选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】

Vue Select 组件详解

原创

已于 2024-05-31 08:24:12 修改 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

于 2024-05-31 08:24:01 首次发布

在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，el-select 选择器组件是一个常用的表单控件，用于从一组选项中选择一个或多个值。以下是对这两个版本下 el-select 组件的属性、事件和方法的详细介绍，并附带示例。

Vue 2 的 Element UI

`el-select`

属性：

v-model / value：绑定值，即选中的值
multiple：是否多选
disabled：是否禁用
placeholder：占位符
clearable：是否可以清空选项
filterable：是否可搜索
allow-create：是否允许用户创建新条目，需配合 filterable 使用
remote：是否使用远程搜索
remote-method：远程搜索方法
loading：是否正在加载远程数据
loading-text：加载远程数据时的文本提示
reserve-keyword：多选且可搜索时，是否保留关键字
collapse-tags：多选时是否将选中值按文字的形式展示
multiple-limit：多选时用户最多可以选择的项目个数
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

加仑小铁

关注关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

ElementUI 前端领域树形选择器的使用方法

小白菜的博客

05-10

1085

在前端开发中，数据的展示和选择是常见的需求。树形选择器是一种能够以树形结构展示数据，并允许用户进行选择操作的组件。ElementUI 作为一款基于 Vue.js 的开源 UI 组件库，提供了功能强大且易于使用的树形选择器组件。本文的目的是详细介绍 ElementUI 树形选择器的使用方法，涵盖从基本概念到实际应用的各个方面，包括组件的初始化、数据绑定、事件处理等内容，帮助开发者更好地利用该组件来满足前端开发中的树形数据选择需求。

vue-picker:Vue的选择器组件

05-14

中文 | vue-picker的组件，囊括了（普通选择、联动选择、中国地址选择）等等常见的picker，兼容PC、移动端，通过简单配置就可以出现一个强大的picker，感受下效果图。 Demo(快点去复制代码体验一波吧) Install npm install vue-pickers --save or yarn add vue-pickers 使用普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用 <template> <div> <button @click="show">show picker</button> <VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm" :vis

参与评论您还未登录，请先登录后发表或查看评论

vue-drag-selector:一个简单的Vue拖动选择器组件

05-07

Vue拖动选择器 基于Vue.js的框选组件示例（演示）安装（install） npm i vue-drag-selector ♡（进口） // main.js import VueDragSelector from "vue-drag-selector"; Vue.use(VueDragSelector); 用法（用法） < template> < div> < drag xss=removed xss=removed xss=removed> < drag-selector-item v-for = "(item, index) in myDragList"

vue封装的通用五级地址联动选择器组件 [拿来即用]

全易

09-08

5242

复制粘贴即可，拿来即用

Vue2选择器（Select）

05-26

2万+

使用Vue2封装的与ant design样式类似的下拉选择器组件。

Vue2+ElementUI下拉、Select组件的封装

qq_43657722的博客

03-07

4322

在 Vue2 项目中，ElementUI 的 `el-select` 组件是常用的下拉选择框组件。它提供了丰富的功能和样式，可以满足各种需求。但是，在实际开发中，我们经常会遇到一些重复性的需求

【区分vue2和vue3下的element UI Cascader 级联选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

06-04

1433

在Vue 2的Element UI和Vue 3的Element Plus中，（级联选择器）组件用于从嵌套的数据中进行选择。以下是对这两个版本下组件的属性、事件和方法的详细介绍，并附带示例。

【区分vue2和vue3下的element UI Dropdown 下拉菜单组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

07-04

1971

在 Vue 2 和 Vue 3 中，Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）提供了 Dropdown 下拉菜单组件，用于展示一个可点击的下拉列表。然而，需要注意的是，Element UI 和 Element Plus 在组件的实现、属性、事件和方法上可能存在差异。

vue+element ui搭建的DEMO增删改查+分页+导出

02-16

Vue.js和Element UI是当前前端开发中非常流行的组合，它们为构建用户界面提供了强大的工具和组件库。Vue.js是一款轻量级的JavaScript框架，强调声明式编程和组件化，而Element UI则是一套基于Vue.js的高质量UI组件库...

vue滑动选择组件_Vue选择组件

cuk5239的博客

07-31

1999

vue滑动选择组件选择 (vselect) A vue select components. Vue选择组件。 View Demo 查看演示 View Github 查看Github 安装： (Installation：) npm install --save-dev vselect-component 如何使用 (How to use) 1，要包含此项目，您需要使用CommonJS...

Vue组件之极简的地址选择器的实现

08-27

主要介绍了Vue组件之极简的地址选择器的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue 77 ，Element 10 ，Element中的选择器组件Select，一级选择器组件el-select

NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）

07-03

2065

⭐在Element UI中，ElSelect（或简称Select）组件是用于从预定义选项中，选择一个或多个值的强大工具。它支持远程搜索、多选等功能，提供优秀的用户体验和高度的灵活性。简洁易用的API设计，使我们能够快速集成，并实现复杂的选择逻辑。

【亲测免费】 Vue范围选择器组件指南

最新发布

gitblog_00656的博客

08-16

770

Vue范围选择器组件指南 1. 项目介绍 Vue范围选择器是基于Vue.js构建的一个滑块组件，旨在提供高度可定制且易于集成到Vue应用程序中的范围选择体验。它支持多种样式配置，包括基础显示、分段风格、兼容PC与移动端以及带有自定义提示的交互设计。此组件特别适用于需要用户进行数值区间选择的应用场景。 2. 项目快速启动要快速开始使用Vue范围选择器, 首先确保你的环境中已经安装了Vue.js。接...

vue3 elementUI select 下拉加载更多（最新-组件封装）

NB_YZL的博客

06-12

1448

【代码】vue3 elementUI select 下拉加载更多（最新）

vue 多项选择器 picker组件——动态绑定数组实现多项选择器

weixin_45896868的博客

04-13

3608

基于这个演示的效果我们可以很直观的知道各个属性的作用：range是我们选择的范围，range-key是要它显示的内容，value是每次选定的下标（类似[0,0,0]这样），@columnchange是滑动改变选择触发的方法。一开始我认为是同步的问题，就是接口的数据还没来及给multiAdress这个数组，picker就已经显示了，于是使用了promise来解决这个问题，但是没有作用，于是我又想了很久，终于在别人的博客中找到了答案，那就是。省市区的格式是这样的，Code可以不用管，这是我调用接口用的参数。

vue3 项目 - 组件封装 - 图标选择器

努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/

08-27

3350

Vue3 全局注册 element-plus Icon组件及图标选择器组件封装

VUE 使用 select 标签添加点击选项的触发事件

qq_38210427的博客

06-06

1424

在 select 标签中加上 @change 属性即可，并且调用的方法上加上 v-model 对应的变量获取选项值。

elementui原生属性_elementUI-select基础属性

weixin_35554226的博客

02-23

654

选择器v-model="value"v-loading="loading"filterableremote:remote-method="remoteMethod"multipleplaceholder="请输入">v-for="v in options":key="v.id":label="v.name":value="v.typeId":disabled="v.isShow">/*...

vue中使用el-select选择器组件,基础组件用法和多选组件搭配使用

多看书少吃饭的博客

06-28

1万+

vue中使用el-select选择器组件,基础组件用法和多选组件搭配使用

element ui 选择器 change的用法举例说明

06-01

Element UI 的选择器组件提供了一个 change 事件，该事件会在选择器的值发生变化时触发。可以通过监听 change 事件来执行相应的操作。以下是一个示例： ```vue <template> <el-select v-model="selected" @change="handleChange"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> <el-option label="选项3" value="3"></el-option> </el-select> </template> <script> export default { data() { return { selected: '' } }, methods: { handleChange() { console.log('选中的值为：', this.selected) // 执行相应的操作 } } } </script> ``` 在上述示例中，当选择器的值发生变化时，会触发 handleChange 方法，并打印出当前选中的值。你可以在 handleChange 方法中执行相应的操作，例如发送请求、更新界面等。