VUE element-ui下拉菜单el-select获取label值或value的值

简介: VUE element-ui下拉菜单el-select获取label值或value的值

步骤:

举例:select数据格式为:

options: [
    {
     value: '1',
     label: '黄金糕'
    }, 
    {
     value: '2',
     label: '双皮奶'
    }
 ]

一:label的获取
1.定义事件

<el-select v-model="form.receivePaymentCustomerId" placeholder="请选择" size="small" filterable @change="customerChange">
   <el-option v-for="(item, index) in customerOptions" :key="index" :label="item.label" :value="item.value" style="width:182px" />
</el-select>

2.事件中做循环处理

customerChange(id) {
     const thisLabel = this.customerOptions.find(item => item.value === id).label
     console.log(`label----->`, thisLabel) //label-----> 国风
},

如图:
在这里插入图片描述
二:value的获取
value的获取很简单:

console.log(`value----->`,this.form.receivePaymentCustomerId) //value----->505177042653202
由此可以得出:el-select筛选框展示label,取值value

在这里插入图片描述

相关文章
|
1月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
16 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
2月前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
33 0
|
1月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
12天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
18天前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
20 1
|
29天前
【UI】elementui select点击获取label 和 value
【UI】elementui select点击获取label 和 value
15 1
|
1月前
|
JavaScript
UI库的按需加载(vue的问题)
UI库的按需加载(vue的问题)
14 0
|
2月前
|
JavaScript 数据库
vue使用element ui实现下拉列表分页的功能!!!
vue使用element ui实现下拉列表分页的功能!!!
47 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
32 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0