在Vue 中获取下拉框的文本及选项值操作

更新时间：2020年08月13日 11:43:37 作者：andy5520

这篇文章主要介绍了在Vue 中获取下拉框的文本及选项值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

方法1：

<!-- element表单组件 -->
<el-form
:model="ruleForm"
label-position="right"
ref="ruleForm"  // 被ref 标记的
status-icon
size="small"
inline
:rules="rules"
label-width="150px"
class="demo-ruleForm"
>

<el-form-item class="addProductA b" label="产品名称" prop="productKind">
<!-- <el-input v-model.number="ruleForm.productKind" maxlength="11" :disabled="isScan" placeholder="请输入产品名称"></el-input> -->
<el-cascader
:options="productsDataOptions"
v-model="ruleForm.productKind"
:disabled="isScan"
style="width:300px;"
size="small"
clearable
placeholder="试试搜索：指南"
filterable
ref="cascaderAddr" // 被ref 标记的

@change="handlerSelectProductsWithUnit"
:show-all-levels="false"
></el-cascader>

以上的Form 表单及其嵌套的联级下拉框都被ref标记之后形成了refs的组件集合

添加监视可以获取当前的refs集合中包含表单ruleForm及cascaderAddr 两个组件集合

下拉框所选择值value =v-model="ruleForm.productKind" 可以获取或者使用

var text=this.$refs['cascaderAddr'].currentLabels
var value =this.$refs['cascaderAddr'].currentValue

方法2：

给下拉框或者联级菜单下拉框定义id

this.printInfos.transportDate=document.getElementById('transportDate').value; // 下拉框取值方式 this.printInfos.productKindName=document.getElementById("productKind").innerText; // 文本框取值方式

补充知识：VUE element-ui下拉列表获取label值

有这样一个场景，当我们往后台数据传的是id时，我们却想在前台获取列表显示的值，这时候可以用下面的方法来获取你想要的label值

let obj = {};
    obj = this.arr.find((item) => {
     return item.id === value;
    });

然后就可以从obj获取你想要的值了

以上这篇在Vue 中获取下拉框的文本及选项值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue + element 实现多选框组并保存已选id集合的示例代码
这篇文章主要介绍了Vue + element 实现多选框组并保存已选id集合,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
vue + el-tree 实现插入节点自定义名称数据的代码
这篇文章主要介绍了vue + el-tree 实现插入节点自定义名称数据的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
vue多页面项目中路由使用history模式的方法
这篇文章主要介绍了vue多页面项目中路由如何使用history模式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
Vue常用指令v-if与v-show的区别浅析
v-if和v-show的区别是前端面试中常问的基础知识点,v-if、v-show顾名思义就是用来判断视图层展示效果的,下面这篇文章主要给大家介绍了关于Vue常用指令v-if与v-show区别的相关资料,需要的朋友可以参考下
2021-10-10
vue单元格多列合并的实现
这篇文章主要介绍了vue单元格多列合并的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
前端axios取消请求总结详解
这篇文章主要为大家介绍了前端axios取消请求总结示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
VUE2实现事件驱动弹窗示例
本篇文章主要介绍了VUE2实现事件驱动弹窗示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue组件vue-treeselect箭头和叉图标变大问题及解决
这篇文章主要介绍了vue组件vue-treeselect箭头和叉图标变大问题及解决方案，具有很好的参考价值，希望对大家有所帮助。
2022-07-07
详解Vue CLI3配置解析之css.extract
这篇文章主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Element UI table参数中的selectable的使用及遇到坑
这篇文章主要介绍了Element UI table参数中的selectable的使用及遇到的坑，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08