element-ui使用select组件同时选中多个值

最新推荐文章于 2024-03-01 09:18:08 发布
VIP文章 最新推荐文章于 2024-03-01 09:18:08 发布
阅读量4.5k 收藏 6
点赞数 1
分类专栏： 前端 vue elementui 文章标签： vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fourierrr_/article/details/106507689
版权

发现问题

首先我们来看一段最基本的el-select代码

<el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in food"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
最低0.47元/天 解锁文章
Fourierrr_
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui中select组件绑定值改变,触发change事件方法
10-18
今天小编就为大家分享一篇element-ui中select组件绑定值改变,触发change事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select 中嵌套时间选择器 el-time-picker 并且实现时间多选功能
最新发布
weixin_45547638的博客
03-01 564
需求是：时间可多选 element中时间的选择不支持多选 下面进行封装拼接时间多选。
ELementUI select多选下拉框获取选中项的全部属性
Samopig的博客
07-13 1万+
原版： <template> <el-select v-model="value1" multiple placeholder="请选择">//multiple 多选，去掉就是单选 <el-option v-for="item in options" //循环添加下拉选项，options数据源遍历对象，item数据源中的元素 ...
系列教程之element点击按钮获取select多选框的值
种麦南山下的博客
06-15 1932
<div id="app"> <el-select v-model="opvalue" placeholder="请选择"> //这里v-model获取的是value值 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.v.
【Vue】2.ElementUI中el-select多选情况下获取label和value
返璞归真
02-27 2583
el-select选中只能获取到value的值，获取不到label的值，所以要循环匹配筛选获取label的值。
elementUI中el-select 选中获取多个数据值
Muchen灬
08-17 5245
el-select 选中获取多个数据值 <el-select v-model="ruleForm.packageId" filterable remote clearable reserve-keyword :loading="shopLoading" placeholder="请选择代理商套餐" size="small" style="width:360px" @change="selectChanelSel"> <el-option v-for="item in c
ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值
热门推荐
BADAO_LIUMANG_QIZHI的博客
08-06 2万+
场景 要实现的效果如下 官方示例代码实现多选 为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。 默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。 <template> <el-select v-model="value1" multiple placeholder="请选择"> <el-option v-for="it...
element-ui select多选情况下获取label和value
Daisy_ls的博客
11-22 1064
【代码】element-ui select多选情况下获取label和value。
vue+elementui中，el-select多选下拉列表中，如何同时获取:value和:label的值？
穆雄雄的博客
10-24 2370
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。 项目场景： 正如题目所说，今天在项目过程中遇到了个需求，因为需要在前台展示运动员的名称，但是运动员的编号在别的地方还需要使用，所以想了想，还是将编号和名称一并添加到数据库中，到时候拿的时候也比较方便。就不用在根据编号查询一遍呢了（接口是外部的，重新查的话会影响效率） 使用的技术：element-ui的el-select标签 问题描述： 下面是下拉列表展示的代码： <el-form-item label="人员名称" > ..
【vue】element ui select选择一个选项传两个值
loyd3的博客
01-08 3960
一般 el-select通过v-model同步传值（一般是传id） 有时需要选择后同时保存id和name 这时可以通过**@change**方法来实现，代码如下： <el-select v-model="id" placeholder="请选择所属分类" class="form-input" @change="handleDirChange($event)" > <el-option :label="item.dirName" :value
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui 关于获取select 的label值方法
10-18
今天小编就为大家分享一篇element-ui 关于获取select 的label值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-element-utils:对 element-ui 的一些组件做的拓展自定义指令工具
08-05
vue 使用 element-ui 项目的一些工具方法、拓展自定义指令等 Custom Directives 对 element-ui 的一些组件做的拓展自定义指令工具 使用yarn包管理 提供指令： v-select-scroll: Select 组件监听滚动，以便做懒加载 v...
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue element-ui父组件控制子组件的表单校验操作
10-15
主要介绍了Vue element-ui父组件控制子组件的表单校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中正确使用Element-UI组件的方法实例
10-14
主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在element-ui的select下拉框加上滚动加载
10-17
主要介绍了在element-ui的select下拉框加上滚动加载，本文以以element-ui中的select为例，给大家介绍的非常详细,需要的朋友可以参考下
帮我封装一个原生微信小程序的下拉选择器，类似element-ui的el-select组件
05-30
好的，下面是一个简单的封装示例： 1. 在 `components` 目录下新建一个 `select` 目录，然后在 `select` 目录下新建两个文件 `select.wxml` 和 `select.js`。 2. 在 `select.wxml` 文件中编写下拉选择器的模板代码，示例如下： ``` <view class="el-select" bindtap="onSelectTap"> <view class="el-select__input"> <input type="text" class="el-select__inner" placeholder="{{placeholder}}" disabled="{{disabled}}" value="{{selectedText}}"> <i class="el-select__caret el-icon-arrow-down"></i> </view> <view class="el-select-dropdown" hidden="{{!showDropdown}}" catchtouchmove="catchTouchMove"> <scroll-view scroll-y="{{true}}" class="el-select-dropdown__list"> <view class="el-select-dropdown__item" wx:for="{{options}}" wx:key="{{item.value}}" bindtap="onOptionTap" data-value="{{item.value}}"> {{item.label}} </view> </scroll-view> </view> </view> ``` 其中，`placeholder` 表示选择器的占位符，`disabled` 表示选择器是否禁用，`selectedText` 表示当前选中的文本，`showDropdown` 表示下拉框是否显示，`options` 表示下拉框的选项列表。 3. 在 `select.js` 文件中编写组件的逻辑代码，示例如下： ``` Component({ properties: { options: { type: Array, value: [] }, placeholder: { type: String, value: '' }, disabled: { type: Boolean, value: false }, value: { type: [String, Number], value: '', observer: 'onValueChange' } }, data: { selectedValue: '', selectedText: '', showDropdown: false }, methods: { onValueChange: function(newVal) { var options = this.data.options; var selectedItem = options.find(function(item) { return item.value == newVal; }); if (selectedItem) { this.setData({ selectedValue: selectedItem.value, selectedText: selectedItem.label }); } }, onSelectTap: function() { if (this.data.disabled) { return; } this.setData({ showDropdown: !this.data.showDropdown }); }, onOptionTap: function(event) { var value = event.currentTarget.dataset.value; this.setData({ selectedValue: value, selectedText: this.data.options.find(function(item) { return item.value == value; }).label, showDropdown: false }); this.triggerEvent('change', { value: value }); }, catchTouchMove: function() { // 阻止滚动穿透 } } }); ``` 其中，`options` 表示下拉框的选项列表，`placeholder` 表示选择器的占位符，`disabled` 表示选择器是否禁用，`value` 表示当前选中的值，`selectedValue` 表示当前选中的值，`selectedText` 表示当前选中的文本，`showDropdown` 表示下拉框是否显示。 4. 在需要使用下拉选择器的页面中，引入 `select` 组件并传入相关参数，示例如下： ``` <import src="../../components/select/select.wxml" /> <template is="select" data="{{ options: options, placeholder: '请选择', value: value }}" /> ``` 其中，`options` 表示下拉框的选项列表，`placeholder` 表示选择器的占位符，`value` 表示当前选中的值。 5. 在需要监听选择器值改变的页面中，使用 `bind:change` 绑定事件即可，示例如下： ``` <import src="../../components/select/select.wxml" /> <view class="page"> <template is="select" data="{{ options: options, placeholder: '请选择', value: value }}" bind:change="onSelectChange" /> </view> ``` 其中，`onSelectChange` 表示选择器值改变时触发的事件处理函数。 这只是一个简单的示例，如果需要更多功能可以根据实际需求进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值